关于react的一些总结

之前为了学习redux买了一本《深入浅出react和redux》，只看了redux部分。最近重新一遍，还是很有收获，这里结合阅读文档时的一些理解，记下一些初学者可能不太注意的东西。

原则：

1.react原本的目标是为设计视图组件，UI=render(data);一个react组件有两个数据源可以驱动渲染，一个是记录内部状态变化的state，一个是外部传入的props。由于props中的变量可能在外部的某个地方被引用，因而props中的数据是绝对不能修改的。

生命周期：

2.react组件的生命周期有三个过程：Mount、Update、Unmount，每个过程都会触发钩子函数：

Mount----

constructor：创建一个组件类的实例，一般用来设置state和绑定成员函数的this；无状态的组件不需要constructor

getInitialState：调用React.createClass时才调用，调用React.createClass已被官方弃用。

getDefaultProps：调用React.createClass时才调用，调用React.createClass已被官方弃用。

componentWillMount：渲染前触发（一般不需要）

render：渲染组件

componentDidMount：渲染完成后触发，比如在这里执行ajax；只能在浏览器中调用

Update----

componentWillReceiveProps:组件传入的props改变或父组件重新渲染时触发

shouldComponentUpdate(nextProps,nextState):返回布尔值决定该次更新是否继续

子该函数中，this.state是setState之前的值。通过this.state,next.state,this.props,next.props对比，决定是否渲染，可以提高组件性能

componentWillUpdate:

render:

componentDidUpdate:可在服务器端或客户端调用。

Unupdate-----

componentWillUnmount:唯一一个卸载过程触发的函数，作者提醒，在mount时通过非react方式创建的dom容易造成内存泄漏，需要在这里手动清除。

数据流：

react中的数据流是自上而下的，父组件可以将props、state、自定义的一些js对象、方法、字符串传给子组件，作为子组件的props，逐级下传。

当几个组件需要共享某个状态变量的时候，react文档提到一个概念“lifting state up”：意思是将这个共享的状态变量放到最近的一个共同父组件中，由这个父组件以props的方式传给子组件。

状态管理：

当我们的应用逐渐变大复杂的时候，往往会发现组件状态管理变得麻烦，对状态进行集中管理是一个好的方案。

1.redux由flux改进而来，使用redux，全局只有一个store保存整个应用的state，这个state是由一个root reducer函数返回的。

2.每当某个组件对应的state需要更新时，调用store.dispatch(action)方法，让root reducer函数根据action.type计算出新的全局state。而action只是一个携带信息的纯js对象。

3.root reducer 内部可以根据action.type调用子reducer函数，该子函数用于计算对应于某个组件的state。

4.单纯使用redux时，在组建生命周期中其实只需要用到store的4个方法：.dispatch()  .subscribe()  .unSubscribe()  .getState() 。

5.redux把组件分两类：无状态的展示组件和有状态的容器组件。用connect()()方法将容器方法（跟踪state，触发state改变）和展示组件封装并生成容器组件。

6.使用redux时，由于app的架构发生了改变，文件结构变成了四个部分：

actionType.JS   //定义action类型

actionCreateor.js  //返回一个触发reducer的action

reducer  //计算新的state，其中state参数不可修改

store  //该文件返回一个全局store

component  //存放组件和connect方法生成的组件

6.扩展redux功能时可以使用中间件，中间件一般是增强store方法的功能，并在action到达reducer之前对其进行处理，比如异步action

7.为了便捷开发，可以引入“react-redux”，提供了Provider组件让我们全局访问store，connect函数生成容器组件

路由：

就用react-router

v2~3版本是静态路由，直接配置url和组件的对应关系。

v4开始动态路由，将路由组件当作react组件来使用，跟app的组件耦合比较深，打包比较麻烦。