生命周期

有哪些常用的生命周期

挂载

• constructor
• componentWillReceiveProps：props 变化时触发
• render
• componentDidMount

更新

• componentWillReceiveProps：在 render 之前，根据 props 计算 state
• shouldComponentUpdate：组件更新前触发，通过返回值决定是否重新渲染（返回 false 本次不更新）
• render
• getSnapshotBeforeUpdate：DOM 更新前触发，作用是在 React 进行 DOM 更新之前获取一些快照数据。
  • 其返回值会作为 componentDidUpdate 的第三个参数
  • 不应该在内部修改 DOM，因为这时的修改可能会在后续被覆盖
• componentDidUpdate：DOM 更新后触发

卸载

• componentWillUnmount：组件卸载前触发（清理定时器、事件监听），此时可以访问 DOM

错误捕获

• getDerivedStateFromError：组件发生错误时，在渲染时触发，用于更新 state，触发重新渲染来显示兜底 UI，不能执行副作用操作
• componentDidCatch：用于记录异常信息（上报），不影响UI

有哪些生命周期的功能，在函数组件中无法实现对等的功能

生命周期	函数组件中的近似替代	无法实现的效果
getDerivedStateFromProps	：通过 useEffect + useState 可以实现在 props 变化时更新 state	无法实现**阻止 render **的功能
shouldComponentUpdate	使用 React.memo() / useMemo() 可以优化 props 改变时的渲染时机	无法阻止 state 改变时的渲染
getSnapshotBeforeUpdate	useLayoutEffect 在DOM 更新后，浏览器绘制前执行	无法返回快照值给 useEffect 使用
componentDidCatch	使用 ErrorBoundary （类组件）包裹根组件	需要借助类组件