React组件的生命周期的使用心得

近期在项目开发中，与组件的生命周期打交道颇多，对于其习性有了一些新的认识，在此做一个记录。

三个生命周期

• 装载过程
• 更新过程
• 卸载过程

装载过程调用的函数

constructor

1. ES6中每个类的构造函数，要创造一个类的实例，必须调用这个构造函数
2. 作为组件中第一个被调用的函数，是初始化state最好的地方，因为state可能组件的任何周期中被访问
3. 绑定this，在构造函数中，this就是当前组件实例。并且只会执行一次this绑定，避免多次绑定造成内存泄漏

componentWillMount

1.这个方法基本没有啥用处，在这个函数中执行setState，组件会更新state，但是渲染一次，设置state可以放在constructor中进行

render

1.render其实是返回一个JSX的描述结构，最终由react进行渲染

componentDidMount

1. 其被调用时，render函数返回的东西已经引发了渲染，组件已经被挂载到DOM树上。
2. 当多个组件render的时候，DidMount并不是紧贴自己组件的render函数后执行，而是所有的render调用后才会执行
3. 因为render函数本身并不往DOM树上渲染内容，它只是返回一个JSX对象，由React库来根据对象决定如何渲染
4. 在该函数中，进行ajax请求是最合适的时机，在其中使用setState会重新触发组件渲染
5. 在需要react配合其它库使用时，componentDidMount时，真实dom已经存在，此时可以获取dom进行操作

更新过程

更新过程是父组件向下传递的props或者组件自身执行setState时发生的更新动作

• componentWillReceiveProps

1. 弄清楚该函数被调用的时机，才能正确的使用它=>父组件的render函数被调用，那么子组件的该函数被调用
2. 父组件传入的props发生变化，就会先执行这个方法，此方法可以作为props传入后，渲染之前setState的机会，并且在这个方法中调用的setState方法是不会二次渲染的

这里说的不会造成第二次的渲染，并不是说这里的setState不会生效。在这个方法里调用setState会在组件更新完成之后在render方法执行之前更新状态，将两次的渲染合并在一起。可以在componentWillReceiveProps执行setState，但是如果你想在这个方法里获取this.state得到的将会是上一次的状态

• shouldComponentUpdate

1. 决定了一个组件什么时候不被渲染
2. 更新过程中，react首先调用该函数
3. 接收新的props和state，让开发者增加必要的条件判断，有需要时更新，没有需要时返回false，组件不在向下执行生命周期方法

• render

• componentDidUpdate

当一个组件被挂载后，props的变化只会触发更新过程，那么怎么使其重新挂载呢？

使用key值，每次改变组件的key时，都会使组件重新mount。其实这并不是多此一举，虽然react框架的核心在于以极小的时间和性能成本去更新组件，每次都力求只重新渲染组件中变化的那个部分，而不是整个组件的重新渲染挂载。但是某些时候，我们需要组件的重新挂载。