❤️❤️❤️Question014 -React、谈谈React组件的生命周期？

[wangbinze]

题目：谈谈React组件的生命周期？

[wangbinze]

[wangbinze]

• 与Vue不同，React的生命周期主要分为3个阶段，分别为挂载时(创建时)，更新时，卸载时。 可参考官方的React生命周期图谱

以下均为生命周期调用顺序。

• 挂载

  • constructor()
    • 初始化属性和状态；
    • 通过给 this.state 赋值对象来初始化内部 state；
    • 为事件处理函数绑定实例。 constructor(props) { super(props); // 不要在这里调用 this.setState() this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this); }
  • static getDerivedStateFromProps()
    • 在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容；
    • 此方法无权访问组件实例；
    • 都会在每次渲染前触发此方法。
  • render()
    • 唯一必须实现的方法。
    • render() 函数应该为纯函数，这意味着在不修改组件state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。
  • componentDidMount()
    • 会在组件挂载后（插入 DOM 树中）立即调用。
    • 依赖于DOM节点的初始化应该放在这里。如果需要通过网络请求获取数据，此处是实例化请求的好地方。

• 更新

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
    • 根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。
    • 当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()
    • 会在更新后会被立即调用。首次渲染不会执行此方法。

• 卸载

  • componentWillUnmount()
    • componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。
    • componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。

• 错误处理

  • static getDerivedStateFromError()
  • componentDidCatch()

React生命周期的一个新旧对比可参考掘金