生命周期和生命周期函数的关系：

生命周期是一个抽象的概念，在生命周期的整个过程，分成了很多个阶段；
- 装载阶段（Mount），组件第一次在DOM树中被渲染的过程；
- 更新过程（Update），组件状态发生变化，重新更新渲染的过程；
- 卸载过程（Unmount），组件从DOM树中被移除的过程；
React内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数：

componentDidMount 函数：组件已经挂载到DOM上时，就会回调；
componentDidUpdate 函数：组件已经发生了更新时，就会回调；
componentWillUnmount 函数：组件即将被移除时，就会回调；
可以在这些回调函数中编写自己的逻辑代码，来完成自己的需求功能；

React生命周期时，主要谈的类的生命周期，因为函数式组件是没有生命周期函数的；（可以通过hooks来模拟一些生命周期的回调）

生命周期解析

生命周期函数：
- Constructor
  - 如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。
  - constructor中通常只做两件事情：
    - 通过给 this.state 赋值对象来初始化内部的state；
    - 为事件绑定实例（this）；
- componentDidMount
  - componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用
  - componentDidMount中通常进行哪里操作呢？
    - 依赖于DOM的操作可以在这里进行；
    - 在此处发送网络请求就最好的地方；
    - 可以在此处添加一些订阅（会在componentWillUnmount取消订阅）；
- componentDidUpdate
  - componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执行此方法。
    - 当组件更新后，可以在此处对 DOM 进行操作；
    - 如果对更新前后的 props 进行了比较，也可以选择在此处进行网络请求；（例如，当 props 未发生变化时，则不会执行网络请求）。
- componentWillUnmount
  - componentWillUnmount() 会在组件卸载及销毁之前直接调用。
  - 在此方法中执行必要的清理操作；
  - 例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等；


  // 3.组件被渲染到DOM: 被挂载到DOM
  componentDidMount() {
    console.log("HelloWorld componentDidMount")
  }

  // 4.组件的DOM被更新完成： DOM发生更新
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("HelloWorld componentDidUpdate:", prevProps, prevState, snapshot)
  }

  // 5.组件从DOM中卸载掉： 从DOM移除掉
  componentWillUnmount() {
    console.log("HelloWorld componentWillUnmount")
  }

不常用生命周期函数

getDerivedStateFromProps：state 的值在任何时候都依赖于 props时使用；该方法返回一个对象来更新state；
getSnapshotBeforeUpdate：在React更新DOM之前回调的一个函数，可以获取DOM更新前的一些信息（比如说滚动位置）；

  getSnapshotBeforeUpdate() {
    console.log("getSnapshotBeforeUpdate")
    return {
      scrollPosition: 1000
    }
  }

shouldComponentUpdate：该生命周期函数很常用（性能优化）；

3. 更详细的生命周期相关的内容，可以参考官网：

zh-hans.reactjs.org/docs/react-…

4.shouldComponentUpdate

shouldComponentUpdate 是 React 组件生命周期中的一个钩子函数，用于控制组件是否需要重新渲染。它接收两个参数：nextProps 和 nextState，用于表示组件更新后的 props 和 state。
当组件接收到新的 props 或者 state 时，React 默认会重新渲染该组件及其子组件。但是，在某些情况下，重新渲染可能是不必要的，例如：
- 当父组件的重新渲染并没有导致当前组件的 props 或 state 发生变化。
- 当组件的 props 或 state 发生变化，但是这些变化对组件的渲染结果没有任何影响，例如计算属性值等。
- 当组件的渲染结果不依赖于 props 或 state，而是根据其他因素计算得出，例如从外部获取数据。
这种情况下，我们可以通过在 shouldComponentUpdate 函数中返回 false 来阻止组件的重新渲染，从而提高性能。

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 判断 props 和 state 是否发生变化
    if (this.props.value === nextProps.value && this.state.count === nextState.count) {
      return false; // 不需要重新渲染
    }
    return true; // 需要重新渲染
  }

  render() {
    return <div>{this.props.value} - {this.state.count}</div>;
  }
}

使用了 PureComponent，它已经默认实现了 shouldComponentUpdate 方法，会比较当前的 props 和 state 与下一个 props 和 state 是否相等，如果相等则不会重新渲染组件。所以，如果你的组件继承了 PureComponent，通常不需要再手动实现 shouldComponentUpdate 方法。

React组件-生命周期

生命周期和生命周期函数的关系：

生命周期解析