react 总结

react 是什么?

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

用于构建用户界面的JAVASCRIPT库

react 的特点

（1）声明式设计

（2）高效：通过对DOM的模拟，最大限度的减少与DOM的交互。

（3）灵活：可以与已知的框架或库很好的配合。

（4）JSX：是js语法的扩展，不一定使用，但建议用。

（5）组件：构建组件，使代码更容易得到复用，能够很好地应用在大项目的开发中。

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

react 组件生命周期

一个React组件的生命周期分为三个部分：实例化、存在期和销毁时

实例化：（当组件在客户端被实例化，第一次被创建时）

1. getDefaultProps

2. getInitialState

3. componentWillMount

4. render

   render方法需要满足下面几点：
   
   只能通过 this.props 和 this.state 访问数据（不能修改）
   
   可以返回 null,false 或者任何React组件
   
   只能出现一个顶级组件，不能返回一组元素
   
   不能改变组件的状态
   
   不能修改DOM的输出
   

5. componentDidMount

   需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性
   
   this.refs.[refName] 属性获取的是真实 DOM

存在期：（此时组件已经渲染好并且用户可以与它进行交互）

1. componentWillReceiveProps

   组件的 props 属性可以通过父组件来更改，这时，componentWillReceiveProps 将来被调用。可以在这个方法里更新 state,以触发 render 方法重新渲染组件。

2. shouldComponentUpdate

3. componentWillUpdate

4. render

5. componentDidUpdate

销毁时：（每当React使用完一个组件，这个组件必须从 DOM 中卸载后被销毁，此时 componentWillUnmout 会被执行，完成所有的清理和销毁工作，在 componentDidMount 中添加的任务都需要再该方法中撤销，如创建的定时器或事件监听器。）

1. componentWillUnmout

react 资料

react 文档

redux 文档

react-redux 文档

redux-saga 文档