react && redux 学习笔记（二）

Reat的生命周期：

 react组件的生命周期分为三个过程：装载过程（Mount）、更新过程（Update）、卸载过程（UnMount）。

装载过程：

1.constructor

 构造函数中初始化state，同时绑定成员函数的this环境，

 例如：this.onclickButton = this.onclickButton.bind(this)这样当函数被调用的时候，this始终指向该组件实例。

2.getInitialState3. getDefaultProps这两个方法是老版本中的方法，新版本中已经弃用了。

4.componentWillMount

 表示“将要装载”，该方法执行的时候，还没有渲染出任何的效果，即是在这里调用this.setState()函数也是没有效果，一切都晚了，换句话说componentWillMount所做的事情均可以在constructor中编写，该函数的存在的意义可能就是和他的兄弟componentDidMout对应吧。

5.render

 render是生命组件很重要的一个函数，react其他的函数可以不实现，但是render函数一定会实现的，render函数并不做实际的渲染动作，他只是返回一个JSX描述的结构，最终由react来操作渲染的过程。

render函数是一个纯函数，由输入决定输出，render函数不会引起状态的改变，因此在render函数中调用this.setState函数是错误的。

6.componentDidMount

 componentDidMount作用比较大，render函数执行完时，componentDidMount并不会立刻调用，componentDidMount被调用的时候，render函数返回的东西已经引发了渲染，组件已经被“装载”到DOM树上。

也就是在该函数中可以使用AJAX来操作DOM。

还有需要注意的是componentDidMount只能在浏览器中被调用。

更新过程：

 当组件装载之后，用户看到的是组件的第一印象，但是要提供比较好的交互效果，需要随着用户的操作来更改内容，当props或者state修改的时候，会引发更新的过程。

1.componentWillReceiveProps（nextProps）

 网络上的误区，该函数仅在props改变的时候更新，事实上，只要是父组件的render函数调用的时候，在render函数中经历的子组件就会经历更新的过程，不管父组件传给子组件的props有没有改变，都会触发componenWillReceiveProps函数。

注意，通过this.setState方法触发的函数不会调用该函数。

2.shouldComponentUpdate(nextProps,nextState)

 这个函数是生命周期函数中第二重要的函数了，第一当然是render了~

render函数返回的结果用于构造DOM对象，而shouldComponentUpdate函数返回的一个布尔值，该返回值告诉react更新是否需要继续。

 默认情况下，该函数的返回值是true，表示每一更新都要重新渲染。这难免会造成资源的浪费，当然在一些小的系统中，还是可以接受的，如果在大项目中势必会影响性能。最简单的就是比较两个参数中的当前值和前一个值是否相同，若相同，则返回false。

 值得一提的是，在调用this.setState函数的时候，并不是立刻去更新该组件，在执行函数shouldComponentUpdate的时候，this.state依旧是this.setState之前的值，所以需要比较nextProps、nextState，this.props，this.state相互比较。

3.componentWillUpdate 和componentDidUpdate

 如果组件shouldComponentUpdate函数执行结果为true的时候，React会一次执行componentWillUpdate，render，componentDidUpdate函数，作用同装载过程一样。

卸载过程：

 卸载的过程只涉及到一个函数componentWillUnMount，当react组件要从DOM树上删掉之前，会调用 componentWillUnMount，该函数会做一些清理的工作。