React生命周期

只有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()
  生命周期图谱
  
  

  image.png

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

• 第一个做法,使用shouldComponentUpdate

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

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

  
  
  

  image.png

如果想要把状态切换做成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 ? '完成' : '未完成'
    }
  }