React

64 阅读1分钟

类组件的生命周期 (React16.3+)

  • 挂载(mounting)
    • constructor:组件初始化构造函数,实例化时调用
    • static getDerviedStateFromProps: 组件实例化、更新时调用,用于根据新props去计算并返回新的state ———componentWillReceiveProps
    • render:渲染组件UI,返回React元素
    • componentDidMount:组件挂载到 DOM 后立即调用,通常用于执行一些异步操作、添加事件监听器等
  • 更新(updating)
    • static getDerviedStateFromProps:组件实例化、更新时调用,用于根据新props去计算并返回新的state
    • shouldComponentUpdate:组件更新前调用,用于判断是否需要进行更新,默认为true
    • render:渲染组件UI,返回React元素
    • getSnapshotBeforeUpdate: rende之后、更新DOM之前调用,可以获取更新前DOM——componentWillUpdate
    • componentDidUpdate:组件更新后调用
  • 卸载(unmounting)
    • componentWillUnmount:组件卸载之前调用

旧生命周期

image.png

新生命周期

image.png