React 新旧生命周期对比

2022/01/09 posted in  基础
Tags:  #React

旧版 React 生命周期函数

常用:componentDidMountcomponentWillUnmountrender

  • componentDidMount:做一些初始化操作,例如:开启定时器、发送网络请求、订阅消息
  • componentWillUnmount:做一些收尾操作,例如:关闭定时器、取消订阅消息
  • forceUpdate:用于强制重新渲染,即使状态不变
  • componentWillReceiveProps:初始化 render 的时候不会执行,它会在 Component 接受到新的状态(Props)时被触发,一般用于父组件状态更新时子组件的重新渲染。
  • componentWillUnmount:ReactDom.unmountComponentAtNode 触发

新版 React 生命周期函数


与旧的生命周期相比

  • 废弃了3个函数:componentWillMountcomponentWillReceivePropscomponentWillUpdate,如果要使用,需加上 UNSAFE_ 前缀,不建议再使用,在未来版本中可能出现 bug
  • 新增了2个函数:getDerivedStateFromPropsgetSnapshotBeforeUpdate
    • getDerivedStateFromProps:极少使用,让 state 始终取决于 props
    • getSnapshotBeforeUpdate:极少使用,在 DOM 更新前,获取 DOM 的值(如滚动位置等),并传递给 componentDidUpdate