React-生命周期知识点详解

• Z时代
• 2024-01-10
• 分类：综合

前言: 只有class组件才有生命周期，function式的组件见没有生命周期(生命周期其实就是里面的一些回调函数)

生命周期阶段

1. 挂载阶段

• constructor(props)(在这里初始化state，这个只会执行一次)，如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。
  通常，在 React 中，构造函数仅用于以下两种情况：
  通过给 this.state 赋值对象来初始化内部 state，
  为事件处理函数绑定实例
• static getDerivedStateFromProps()
• render(只负责渲染，这几个带will的都在render之前执行)，如果 shouldComponentUpdate() 返回 false，则不会调用 render()和componentDidMount。
• componentDidMount(在这个获取到真实的DOM)
  -注-：Ajax请求在componentDidMount()里做
  这个即将不用：
  UNSAFE_componentWillMount(即将挂载)会和static getDerivedStateFromProps()互斥

2. 更新(当组件的props或者state发生变化时触发)
   static getDerivedStateFromProps(新版本加入，这里面没有this，在实例创建前就已经存在)
   shouldComponentUpdate(很重要，组件是否需要更新)
   render()
   getSnapshotBeforeUpdate()
   componentDidMount()
   这两个即将不用：
   UNSAFE_componentWillUpdate()
UNSAFE_componentWillReceiveProps(nextProps,nextState)

3. 卸载

• componentWillUnmount(在这里会清除定时器等)

4. 错误处理

• static getDerivedStateFromError()
• componentDidcatch()
  生命周期图谱
  

5. shouldComponentUpdate()可以在这里做性能优化

• 第一个做法,使用shouldComponentUpdate

  shouldComponentUpdate (nextProps,nextState) {
  return nextProps.isCompleted !== this.props.isCompleted
  }

• 第二个做法，利用PurComponent(纯组件)，是自动在shouldComponentUpdate里做了一次浅比较，所以有时候还会再做一次shouldComponentUpdate
  首先需要import引入，然后在原来写component的地方用PurComponent代替

• 如果想要把状态切换做成state方式：

  // TodoItem.js
  export default class TodoItem extends Component {
  constructor () {
  super()
  this.state = {
  completedText: ‘’
  }
  }
  shouldComponentUpdate (nextProps,nextState) {
  return nextProps.isCompleted !== this.props.isCompleted
  }
  static getDerivedStateFromProps (props) {
  return {
  completedText: props.isCompleted ? ‘完成’ : ‘未完成’
  }
  }

以上是 React-生命周期知识点详解 的全部内容， 来源链接： utcz.com/z/381644.html