React学习总结—生命周期

React组件的生命周期根据广义定义描述，可以将其分为挂载（Mounted）、更新（Update）和卸载（Unmounting）三个阶段，每个阶段React都封装了对应的hack函数，各阶段包含的hack函数如下图



根据这个图，我们详细说明一下各hack函数执行顺序和作用

Mounted挂载阶段

该阶段是组件的挂载阶段，组件主要通过render方法解析生成对应的DOM节点，并将其推入浏览器的DOM结构中，完成组件状态的初始化。

constructor 方法是React组件的构造函数，在该函数中可以使用this.state来初始化React组件的状态值

componentWillMount 方法是在render之前执行的方法，而且该方法只执行一次，所以在该方法中执行setState方法是没有意义的。如果需要发送AJAX请求来初始化页面，可以在该函数中调用发送AJAX请求的方法

componentDidMount 方法是在render之后执行的方法，同componentWillMount一样，该方法也是只执行一次。该方法被调用时已经渲染出真实的DOM节点，所以在该方法中可以使用this.getDomNode()、ReactDom.findDomNode()或this.refs访问到真实的DOM节点。如果在该方法中执行setState方法，组件会再次更新。

update更新阶段

数据更新过程指的是父组件向下传递props或组件自身执行setState方法时发生的一系列更新动作。

如果组件自身的state更新了，那么会依次执行shouldComponentUpdate、componentWillUpdate、render和componentDidUpdate方法；若因父组件的props发生变化而更新组件，在shouldComponentUpdate方法执行之前会执行componentWillReceiveProps方法

shouldComponentUpdate(nextProps,nextState) 方法是在组件更新重新渲染dom之前调用的组件函数，该方法将组件是否重新渲染的权限交给了开发者，当该函数返回false时，表示该组件不需要重新渲染，返回true表示该组件需要重新渲染。在React中，该函数默认返回true。利用改函数可以提高react的性能，但是使用该函数需要谨慎，见文章什么时候要在React组件中写shouldComponentUpdate？

componentWillReceiveProps(nextProps) 方法是在父组件更新props而更新该组件时，在shouldComponentUpdate之前执行的方法。此方法可以作为React在props传入后，修改当前组件state的机会，并且调用setState方法不会二次渲染。

componentWillUpdate(nextProps,nextState) 方法是在shouleComponentUpdate方法返回true的时候执行的方法，该方法代表在更新过程中渲染前的时刻，但是在该方法中不能使用setState方法，如果需要更新 state 来响应某个 prop 的改变，请使用 componentWillReceiveProps。

componentDidUpdate() 方法是在更新过程渲染后执行的方法，在该方法中可以对更新之后的Dom元素进行操作，并且可以使用setState方法

unMount卸载阶段

组件的卸载非常简单，只有componentWillUnMount这一个卸载前状态。

在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。