react基础

首先先介绍一下react

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React的特点

• 1.声明式设计??React采用声明范式，可以轻松描述应用。?声明式：不在回执行过程，只在乎执行结果

• 2.高效??React通过对DOM的模拟，最大限度地减少与DOM的交互。

• 3.灵活??React可以与已知的库或框架很好地配合。

• 4.JSX?? JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

  jsx语法的优点

  ? ? ? ? 1、jsx执行更快，因为它在编译为javascript代码后进行了优化
  ? ? ? ? 2、它是类型安全的，在编译过程中就能发现错误
  ? ? ? ? 3、使用jsx编写模板更加简单快速

• 5.组件?? 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

• 6.单向响应的数据流?? React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

? ? React的指令

? ? 在react当中没有固定的指令只需要{}就可以搞定

? 1、let meessage="1111"

? ? ? ?let dom = <div><h2>{message}</h2>? <p>{true?1:2}</p></div>

? 2、let h2=<h2>1111</h2>

? ? ? ?let dom=<div>{h2}</div>

3、let dom=<div>{false?<h2>张三</h2>:<h2>李四</h2>}</div>

4、let dom=<div><h2 style={{display:true?"block":"none"}}张三</h2> <h2 style={{display:false?"block":"none"}}>李四</h2></div>

5、let box="box"

? ? ?let dom=<div className={box}> </div>

? ? ?注意在react当中如果需要取类名时不允许用class必须写成className

6、let dom=<label htmlFor="box"> <input type="text" id="box" /></lable>

? ? 注意在react当中for属性必须写成htmlFor

简单的列举几种还有挺多的

在react如何创建一个组件呢？

语法：

方案一：ES6写法
class 组件名称 extends Component{ }

方案二：ES5写法 var App = React.createClass({})

component:是所有组件的父类

组件名称必须大写，为了区分标签和组件的区别

render：

是一个生命周期函数，它主要用来做虚拟DOM的渲染

return 里面只能有一个子元素<div></div>

参数1：需要渲染的组件/标签

参数2：将这个组件或者标签在那个挂载点上

参数3：挂载成功以后的回调

render函数什么时候会执行？

当this.state/this.props发生改变的时候render函数会重新执行

constructor：

是一个生命周期，这个生命周期函数用来做组件的初始化工作。

在当前函数中我们可以定义当前组件所需要一些状态，状态存放在this.state中

另外调用当前函数必须调用super，如果不调用则会报错this的指向也会发生改变

在React中如何修改state中的数据？

通过this.setstate()

this.setState是一个异步函数

参数1：对象需要修改的数据

参数2：回调

this.setstate为什么是异步的？

当批量执行state的时候可以让DOM渲染的更快,也就是说多个setstate在执行的过程中还需要被合 并