React 生命周期解析

暂且将react的生命周期分为四个阶段：初始化、挂载、数据跟新、卸载。这写阶段对应的钩子函数和他们之间的关系，用图表示： life-cycle-react.png

1. 组件初始化

   class Test extends React.PurComponent{ //es6 的写法    static defaultProps = {}; //对应 getDefaultProps()    constructor() {    	super(); //    	this.state = { // 对应getInitialState()    	}    }}复制代码

2. 组件挂载

   class Test extends React.PurComponent{    、、、    componentWillMount() {            }    render() {            }    componentDidMount() {            }}复制代码

   该阶段涉及到两个方法：componentWillMount(),componentDidMount();

   componentWillMount：发生在将组件插入到真实dom之前,constructor()方法之后，请注意：在该方法里面setState是不会触发重复渲染。

   componentDidMount：发生在render方法之后，此时，真实Dom已经形成，只调用一次，在该方法里面可以更新Dom元素了.

3. 数据更新阶段 数据更新分为两种情况：props更新、state更新 所涉及的方法：componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate.

   • componentWillReceiveProps(nextProps):接收一个参数,可以利用该方法，在组件render之前修改 state，在该方法里面修改state不会触发重复渲染。

   • shouldComponentUpdate:接收两个参数nextProps、nextState,该方法返回一个Boolean值，默认返回true，需要触发重复render().如果返回false，则不会调用以下的函数了：

     • componentWillUpdate()
     • render()
     • componentDidUpdate()

     所以在实际开发中，利用该方法，根据新的props和state是否发生变化来决定是否返回值；是react项目可优化的地方。 注意：不能在该方法里面不能调用this.setState()

   • componentWillUpdate() 在接收到新的 props和state之后render之前调用。 这里需要注意，你不能在 componentWillUpdate 中执行 this.setState()。如果感兴趣大家可以阅读:

   • componentDidUpdate() 在React在Dom没更新之后立即调用

4. 卸载阶段 该阶段只有一个方法：componentWillUnMount()

   在组件卸载前调用，所以在该方法里面 需要做的是：执行清理工作。比如：一些倒计时.