React v16.3.1 生命周期

去年曾经使用过React，那个时候还是使用的React v14，今年又要使用到React，发现最新的React的生命周期已经有了一些变化，有一些生命阶段在v17的时候即将要被废弃，所以特此记录一下。

React有组件这一概念，对于每一个组件来说，都有其自己的生命周期，我觉得可以理解为设计模式中的模板，我们可以复写每一个方法，但是这些方法始终遵循着一个固定的顺序在运行。

生命周期的各个阶段

React生命周期有三个阶段：

1. Mounting

这个阶段表示当一个组件被实例化创建并且插入到DOM中。在这个阶段，被调用的方法有：

• constructor()
• static getDerivedStateFromProps()
• componentWillMount() / UNSAFE_componentWillMount()
• render()
• componentDidMount()

2. Updating

当组件已经被插入到DOM中，渲染完毕后，props／state发生改变，即组件的状态发生了改变，此时组件会被重新渲染。在这个阶段，被调用的方法有：

• componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
• static getDerivedStateFromProps()
• shouldComponentUpdate()
• componentWillUpdate() / UNSAFE_componentWillUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

3. Unmounting

这个阶段意味着组件将要被移出DOM。在这个阶段，被调用的方法有：

• componentWillUnmount()

此外还有一个特殊的阶段。

Error Handling

当在构造函数、生命周期函数或渲染的时候出现错误时，将会调用以下方法：

• componentDidCatch()

生命周期函数详解

constructor()

此函数在组件被mount前被调用。如果实现该方法的组件是 React.Component 的子类，那么在写其他代码前需要调用 super(props) 方法，否则在构造函数中 this.props 就是 undefined，就会因此导致一些bug的产生。

该方法用于初始化 state, 和在组件实例上绑定事件 handler。需注意，初始化 state 时，只能使用this.state来进行初始化，不可以使用 setState()。

如果不需要初始化任何 state，也不需要绑定任何事件的话，那么这个方法就可以不实现。（如果没有用到的话，在运行的时候浏览器上也会提示这个方法没有用哟～）

static getDerivedStateFromProps()

这个方法是相较于之前的版本新加入的方法，之前在列举各个阶段的方法时，可以发现有一些方法前边带有 UNSAFE，官方建议是使用 getDerivedStateFromProps()来代替那些方法的使用。

这个方法将会在组件实例化和接收到新的 props 的时候被调用。可以看出，当组件实例化的时候，这个方法替代了componentWillMount()，而当接收到新的 props 时，该方法替代了 componentWillReceiveProps() 和 componentWillUpdate()。

需要注意，这个方法是个 static 的方法，因此使用 this 在这个方法中并不指代本组件，如果打印出来会发现这个this在这个方法中是null。而且这个方法会返回值。 当需要更新状态时，需要返回一个 object ，如果不需要任何更新，则返回null即可。

如果由于父组件的原因导致该组件重新渲染，这个方法也会被调用, 如果只想要处理更新的话，最好加上判断条件if (nextProp !== prevProp)。另外，虽然this.setState()也会导致组件重新渲染，但并不会导致这个方法的重新调用。

componentWillMount() / UNSAFE_componentWillMount()

现在componentWillMount()和UNSAFE_componentWillMount()两个方法名共存，但是在v17中，componentWillMount()将不再存在，取而代之的则是只有UNSAFE_componentWillMount()。其他类似的同样如此。官方现在是推崇使用getDerivedStateFromProps()，对于已经存在的应用，使用UNSAFE则是不推崇但是向下兼容的一种做法。

这个方法在 mounting 发生之前被调用。由于这个方法在render()前被调用，因此即使在这个方法中调用setState()，也不会导致额外的渲染。

render()

一个组件中必须有这个方法。

这个方法需要返回一下几种东西之一：

• React elements：element 可以是一个原生的 DOM 组件 <div />, 或是一个用户自定义的组件<MyComponent />.
• String and numbers
• Portals: Created with ReactDOM.createPortal.
• null
• Booleans: 有时可能是一个类似于return test && <Child />的pattern。

当返回值为null, false, ReactDOM.findDOMNode(this)时，即返回null.

render()方法需要是一个很干净的方法，它不应改变任何组件状态，每次被调用都应该返回相同的东西，且不应与浏览器有直接的交互。如果需要跟浏览器产生交互的话，官方建议是在componentDidMount() 或其他生命周期函数中进行，而不是render()

需注意，若shouldComponentUpdate()返回值为false时，render()方法不会被调用。

componentDidMount()

这个方法在组件被mount后被立即调用。如果需要从远端加载数据的话，推荐在这个方法中初始化网络请求。

由于这个方法发生在render()之后，因此在这个方法中调用setState()会导致一次额外的渲染，只不过这次渲染会发生在浏览器更新屏幕之前。因此即使渲染了两次，用户也不会看到中间状态，即不会有那种状态突然跳一下的情况发生。对于像modals和tooltips这种需要在渲染前知道尺寸大小、位置的情况来说，也是很有用。只不过，虽然在用户视觉体验上可能没有影响，但是这种操作可能会导致性能方面的问题，因此还需慎用。

componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()