组件的生命周期

发布于 2022-07-20  24 次阅读


组件卸载

ReactDOM.unmountComponentAtNode(document.getElementById('demo'))

生命周期

  • constructor 调用构造器
  • componentWillMount 组件将要挂载(用 render 挂载,所以 render 在下边)
  • render 初始化渲染,状态更新以后
  • componentDidMount 组件挂载完毕(render之后调用)
  • componentWillUnmount 组件将要被卸载时
  • shouldComponentUpdate 组件是否应该被更新
    • 控制组件更新的“阀门”
    • 默认 return true
  • componentWillUpdate 组件将要被更新
  • componentDidUpdate(preProps, preState,snapshotValue) 组件更新完毕的钩子
    • 参数是上一次的的props和state
    • snapshotValue 是新生命周期钩子 getSnapshotBeforeUpdate 传过来的
  • componentWillRecevieProps(props) 组件将要接受新的props(父组件调用render ,子组件就会调用此钩子)
    • 子组件第一次接受父组件的props,此钩子不会被调用
  • forceUpdate 方法:不更改任何状态中的数据,强制更新一下

总结

  • static getDerivedStateFromProps(props, state) 从props中派生出一个状态
    • 类的静态方法
    • 必须返回状态对象或者null
    • 使用场景(低,不常用):
      • state的值在任何时候都取决于 props 时,可以使用此钩子
      • 比如自己state中有个属性,传入的props也有这个属性,那么就在这个钩子中比较下,看什么条件下用父组件传入的,什么时候用自己的
  • getSnapshotBeforeUpdate 在更新之前获取快照(在最近一次渲染输出(提交到DOM节点)之前调用)
    • 返回值将作为参数传递给 componentDidUpdate
    • 返回 snapshotValue 或者 null
    • 使用场景:特殊方式处理滚动位置的聊天线程等(新消息出现,当前看的消息固定定位)

总结

最后更新于 2023-07-20