React生命周期详解及适用场景

constructor (构造函数)

只有在组件实例化并插入到 DOM 中的时候才会被调用。组件实例 化的过程称作组件的挂载(mount)。
它在组件初始化时被调用。在这个方法中，你可以设置初始化状态以及绑定类方法。

componentWillMount()

它在 render() 方法之前被调用。这就是为什么它可以用作去设置组件内部的状态，因为它不会触发组件的再次渲染。但一般来说，还是推荐在constructor() 中去初始化状态。

render()

该方法会在组件被挂载过程中被调用，同时当组件被更新的时候也会被调用，每当组件的状态 （state）或属性 （props）改变时，组件的 render() 方法都会被调用
这个生命周期方法是必须有的，它返回作为组件输出的元素。这个方法应该是一个纯函数，因此不应该在这个方法中修改组件的状态。它把属性和状态作为输入并且返回(需要渲染的)元素

componentDidMount()
它仅在组件挂载后执行一次。这是发起异步请求去 API 获取 数据的绝佳时期。获取到的数据将被保存在内部组件的状态中然后在 render() 生命 周期方法中展示出来。

componentWillReceiveProps(nextProps)
这个方法在一个更新生命周(updatelifecycle) 中被调用。新的属性会作为它的输入。因此你可以利用 this.props 来对比之后的属性和之前的属性，基于对比的结果去实现不同的行为。此外，你可以基于新的属性 来设置组件的状态。

shouldComponentUpdate(nextProps, nextState)
每次组件因为状态或者属性更改而更新时，它都会被调用。你将在成熟的 React 应用中使用它来进行性能优化。在一个 更新生命周期中，组件及其子组件将根据该方法返回的布尔值来决定是否重新渲染。 这样你可以阻止组件的渲染生命周期(render lifecycle)方法，避免不必要的渲染。

componentWillUpdate(nextProps, nextState)
这个方法是 render() 执行之前的最后 一个方法。你已经拥有下一个属性和状态，它们可以在这个方法中任由你处 置。你可以利用这个方法在渲染之前进行最后的准备。注意在这个生命周期方法中你不能再触发 setState()。如果你想基于新的属性计算状态，你必须利用 componentWillReceiveProps()。

componentDidUpdate(prevProps, prevState)
这个方法在 render() 之后立即调用。你可以用它当成操作 DOM 或者执行更多异步请求的机会。

componentWillUnmount()
它会在组件销毁之前被调用。你可以利用这个生命周期 方法去执行任何清理任务。

componentDidCatch(error, info) 错误处理

它在 React 16 中引入，用来 捕获组件的错误。举例来说，在你的应用中展示样本数据本来是没问题的。但是可能会有列表的本地状态被意外设置成 null 的情况发生(例如从外部 API 获取列表失败时，你把本 地状态设置为空了)。然后它就不能像之前一样去过滤(filter)和映射(map)这个列表，使用真实的 API因为它不是一个空列表([])而是 null。这时组件就会崩溃，然后整个应用就会挂掉。现在你可以用 componentDidCatch() 来捕获错误，将它存在本地的状态中，然后像用户展示一 条信息，说明应用发生了错误。