概述

今天学习react时候，借编写这篇文章加深一下对react周期加深印象

5287253-bd799f87556b5ecc副本.png

Initialization阶段

constructor()

constructor方法在组件建立前被调用。
  1、在这个方法里面，应该先调用super(props)，否则this.props就会未定义。
  2、这个方法的主要用途是，初始化props，state和绑定方法。
在 constructor() 函数中不要调用 setState() 方法。如果你的组件需要使用内部 state，请直接在构造函数中为 this.state 赋值初始 state：

constructor(props) {
  super(props);
  // 不要在这里调用 this.setState()
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

Mounting阶段

componentWillMount()

这个方法在render方法执行前渲染，componentWillMount() 在挂载之前被调用。它在 render() 之前调用，因此在此方法中同步调用 setState() 不会触发额外渲染。通常，我们建议使用 constructor() 来初始化 state。
避免在此方法中引入任何副作用或订阅。如遇此种情况，请改用 componentDidMount()。
此方法是服务端渲染唯一会调用的生命周期函数。
此方法即将过时，项目中避免使用。

render()

当调用render的时候，组件会检查props和state并返回下列类型中的一个：

• react元素。
• 字符串或者数字。
• Portals。
• null。(不渲染)
• Booleans。(不渲染)
• react.Fragment。

componentDidMount()

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。
这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 componentWillUnmount() 里取消订阅

你可以在 componentDidMount() 里可以直接调用 setState()。它将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 render() 两次调用的情况下，用户也不会看到中间状态。请谨慎使用该模式，因为它会导致性能问题。通常，你应该在 constructor() 中初始化 state。

Updation阶段

shouldComponentUpdate()

shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true，返回 false，则不会调用componentWillUpdate(),render()，React 可能会将 shouldComponentUpdate 视为提示而不是严格的指令，并且，当返回 false 时，仍可能导致组件重新渲染。
此方法，大部分情况下组件可能都不需要它，仅作为性能优化的方式而存在，例如阻止子组件每次都渲染。

UNSAFE_componentWillUpdate()

此生命周期之前名为 componentWillUpdate,当组件收到新的 props 或 state 时，会在渲染之前调用 UNSAFE_componentWillUpdate()。使用此作为在更新发生之前执行准备更新的机会。初始渲染不会调用此方法.
此方法即将过时，项目中避免使用。

componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。（例如，当 props 未发生变化时，则不会执行网络请求）。

componentDidUpdate(prevProps) {
  // 典型用法（不要忘记比较 props）：
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

你也可以在 componentDidUpdate() 中直接调用 setState()，但请注意它必须被包裹在一个条件语件里，正如上述的例子那样进行处理，否则会导致死循环。

Unmounting

componentWillUnmount()

componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。

总结

简单记录一下react的生命周期，有些过时的就没做太多介绍，其实官网介绍的还是很清晰的，大家可以参考官网熟悉生命周期。