React 组件的生命周期

React 组件的生命周期

 

概述

React组件的生命周期函数如下图所示：

下面分三个阶段分析：

 

 

挂载阶段 Mounting

 

1. constructor

   组件的constructor方法会在组件挂载完成后被调用。在你声明constructor方法时，注意要在开头调用super（props）方法。否则就会引起this.props会因为未定义而报错。

   需要注意的是，除非在constructor中初始化state或者绑定方法，否则就不需要用到constructor函数。一般来说，方法尽量不要放在构造函数中以免引发一些错误。

2. static getDerivedStateFromProps

   getDerivedStateFromProps在组件实例化后，和接受新的props后被调用。他返回一个对象来更新状态，或者返回null表示新的props不需要任何state的更新。可以用来替换componentWillRecieveProps周期方法。

   如果是由于父组件的props更改，所带来的重新渲染，也会触发此方法。

3. componentDidMount

   componentDidMount在组件被挂载后立即调用。初始化使得DOM节点应该进行到这里。若你需要从远端加载数据，这是一个适合实现网络请求的地方。在该方法里设置状态将会触发重新渲染。我们可以在component中调用setState()方法，但是这会引起组件的再次渲染。不过第二次渲染会在浏览器更新屏幕之前，所以不会有页面卡顿的副作用。官方的建议是如非必要尽量在constructor中初始化state的值。 

4. render

   render方法是组件唯一要求必须定义的方法。当render方法被调用时，它会验证组件的参数和状态并且返回以下几种类型之一：

   1. react 元素
   2. 字符串或数组
   3. Portals。react 16版本中提出的新的解决方案，可以使组件脱离父组件层级直接挂载在DOM树的任何位置。
   4. null？boolean，什么也不渲染或者根据boolean判断是否渲染。

更新阶段 Updating

1. getSnapshotBeforeUpdate

   这个生命周期方法在组件转变发生之前。它返回一个值并将这个值作为componentDidUpdate的第三个参数。

   比如说当你需要保存当前的滚动位置，那么在重新渲染时，你可以通过调用这个方法记录滚动位置然后再componentDidUpdate中更新。

2. componentDidUpdate

   componentDidUpdate()会在更新发生后立即被调用。该方法并不会在初始化渲染时调用。

   当组件被更新时，使用该方法是操作DOM的一次机会。这也是一个适合发送请求的地方，要是你对比了当前属性和之前属性（例如，如果属性没有改变那么请求也就没必要了）。

   注意

   若shouldComponentUpdate()返回false，componentDidUpdate()将不会被调用。

卸载阶段 Unmounting

1. componentWillUnMount

   componentWillUnmount()在组件被卸载和销毁之前立刻调用。可以在该方法里处理任何必要的清理工作，例如解绑定时器，取消网络请求，清理任何在componentDidMount环节创建的DOM元素。