React类组件的生命周期

  • 初始化阶段的生命周期只会执行一次钩子函数,运行中的阶段会随着状态的改变或父组件变更了属性而执行钩子函数,销毁阶段会随着组件在DOM数上被移除而触发的钩子。
  • 具体看文件中的代码:https://gitee.com/manongquan02/react_test.git

新的生命周期 getDerivedStateFromProps与getSnapshotBeforeUpdate

getDerivedStateFromProps

  • getDerivedStateFromProps 特点: 替代了 componentWillMount(初始化) 和 componentWillUpdate(运行中) 更安全
  • getDerivedStateFromProps 在父组件传递属性变动则会影响子组件,子组件在渲染新DOM之前会触发getDerivedStateFromProps,getDerivedStateFromProps有两个参数,1.newProps 在渲染之前拿到最新的属性 2.newState 在渲染之前拿到最新的状态
  • getDerivedStateFromProps的返回值为一个对象,与旧的state对象进行合并

getSnapshotBeforeUpdate

  • getSnapshotBeforeUpdate的特点: 取代了 componentWillUpdate(运行中) 配合 componentDidUpdate 使用
  • componentDidUpdate的参数 1. oldProps 上一次的props, 2. oldState 上一次的状态 3. getSnapshotBeforeUpdate 在更新之前返回的值
  • getSnapshotBeforeUpdate 和 componentWillUpdate 的区别,执行顺序上的区别:componentWillUpdate的执行顺序是 componentWillUpdate -> render => componentDidUpdate 而 getSnapshotBeforeUpdate的执行顺序是 render => getSnapshotBeforeUpdate => componentDidUpdate 从此看出 新的生命周期(更新之前的钩子)调整了顺序 让更新之前的钩子和更新之后的钩子越来越近了。
  • getSnapshotBeforeUpdate的返回值不能为undefined
posted @ 2022-11-27 23:10  HuangBingQuan  阅读(78)  评论(0编辑  收藏  举报