react组件的生命周期

React组件的生命周期

　　在用es6写组件时，一般使用class来表示的，即 class Todos extends React.Component {}。

与生命周期有关的函数：

consctructor --- 构造函数，在创建组件的时候调用。
componentWillMount --- 在组件将要挂载之前调用一次。
componentDidMount --- 在组件挂载之后调用一次。这时候，子组件也都挂载好了，即我们我可以使用refs来操作子组件了。 一般，我们都会在这个钩子函数中注册一些事件，但是注册的事件必须在 componentWillUnmojnt 将注册的组件删除。
componentWillReceiveProps --- props是父组件传递给子组件的，父组件在render的时候就会调用（无论props是否更新，无论父子组件是否有数据交换）。
shouldComponentUpdate --- 组件挂载之后，每次调用 setState 后都会调用 shouldCoponentUpdate 。判断是否需要重新渲染组件。 默认返回true，即需要重新render。 在比较复杂的应用中，有一些数据的变化并不会影响界面的展示，可以在这里做判断，优化渲染效率。
componentWillUpdate --- 当shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate就会被调用，即将要开始update。
componentDidMount --- 首次render之后就会调用这个钩子函数。
componentDidUpdate --- 除了首次render之后都会调用componentDidUpdate这个钩子函数。注意：这个钩子函数一般很少使i用，因为它会被频繁的调用，有很大的不确定性。
componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于，前者只有在挂载的时候会被调用；而后者在以后的每次更新渲染之后都会被调用。
render --- 这个React组件中必不可少的核心函数（上面其钩子函数都不是必须的）。
componentWillUnmount --- 组件被卸载的时候调用，一般在componentDidMount里面注册的事件需要在这里删除。

更新方式

　　在react中，触发render的有4条路径（下面我们都假设shouldComponentUpdate都是按照默认方式返回true的方式）

首次渲染 Initial Render
调用 this.setState （注意：并不是一次setState就会触发一次render，React可能会合并操作，然后一次性的进行render）
父组件发生更新（一般就是从父组件传递过来的props发生改变，注意：就算是props的值没有变或者父子组件没有数据交换也会触发render）
调用this.forceUpdate。

下面这幅图大致可以说明生命周期：

react组件的生命周期

根据以上图示，我们发现，我们可以通过两条思路来讲解react中的生命周期：

首次加载(5个相关钩子函数)：即第一次挂载时所触发的。
- constructor -> componentWillMount -> render -> componentDidMount -> componentWillUnmount

更新（6个钩子函数）

componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate -> componentWillUnmount

这些钩子函数尽管有重叠，但是在形式上已经构成了一个足球队啦！ 我们可以看到，不重叠的钩子函数有 8 个。

我们可以看到触发更新的几个点：this.setState、 this.forceUpdate、还有就是父组件改变，传递过来新的props时子组件会更新，并且除了 this.forceUpdate 之外，其余的更新都可以通过 shouldComponentUpdate 来优化。

这个链接 http://wximg.gtimg.com/shake_tv/test/lifeCycle2113.html 可以进行测试顺序。

参考文章： http://www.jianshu.com/p/4784216b8194

react组件的生命周期

与生命周期有关的函数：

更新方式

相关推荐