React常用生命周期函数通俗易懂

React生命周期

学习生命周期小套路

1. 会在什么时候被调用
2. 有什么用

严格模式组件

该标签会导致某些生命周期函数运行的时候，运行多了一次。
该标签仅在开发环境下生效，如果运行 yarn build 打包成生产环境代码的时候就会自动被干掉。开发环境下：第二次运行是为了严格校验。

挂载时

1. render
2. constructor
3. componentDidMount

constructor

直接翻译过来叫：构造函数，构造器。

1. 执行时机：类被初始化的时候自动触发。
2. 有什么用：负责类组件的初始化工作。

// constructor 常用于做初始化工作
constructor() {
    super();   // 必须的
    // 初始化 state 数据
    this.state = {
        aa: 11
    };
    // 通过 bind 锁定 this 指向
    this.handleClick = this.handleClick.bind(this);
}

render

1. 执行时机：标签即将显示的时候触发。
2. 有什么用：用来渲染 页面结构。
3. render() 方法是 class 组件中唯一必须实现的方法。

注意事项：不要在 render 中调用 this.setState()，会出现死循环。

componentDidMount
会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。

1. 执行时机： 类似于 Vue 的 mounted，组件挂载完毕自动触发。
2. 有什么用：一般是负责发送异步请求，获取到数据在渲染到页面。

static getDerivedStateFromProps() （了解即可基本不用）
getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

更新时

当组件的 props 或 state 发生变化时会触发更新，会按顺序调用以下的生命周期事件。

1. static getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

static getDerivedStateFromProps()(不常用)
1. getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

shouldComponentUpdate()（不常用）

1. 执行时机：当props和state发生改变时触发。
2. 有什么用：在更新更新组件前的拦截器。
3. 返回true 则表示允许执行 render ，返回 false这表示 不允许运行render。
   后面用到的 React.PureComponent 高性能组件的底层原理就要依赖 shouldComponentUpdate。

render()
同上述说明
getSnapshotBeforeUpdate()（不常用）
getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()

componentDidUpdate()
当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。（例如，当 props 未发生变化时，则不会执行网络请求）。

1. 执行时机：会在更新后会被立即调用。(首次渲染叫挂载，挂载不会执行此方法)

2. 有什么用：当组件更新后，可以在此处对 DOM 进行操作。

3. 如：列表的高度是不固定的，根据子组件内容自动撑开，我们想要在更新后获取最新的高度，就可以调用该生命周期函数在内部获取。

componentDidUpdate(prevProps) {
  // 典型用法（不要忘记比较 props）：
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

补充：this.setState() 都属于更新，更新后就会触发组件的 componentDidUpdate。

卸载时

componentWillUnmount()

1.执行时机：在组件卸载及销毁之前直接调用。
2. 有什么用：关闭定时器。取消订阅 (订阅是一种设计模式)