React基础篇（一）：React生命周期及其使用场景

1、首先介绍一下生命周期三个类型和三个阶段

三个类型：创建时、更新时、卸载时

三个阶段：“Render”阶段、“Pre-commit”阶段、“Cimmit”阶段

2、生命周期方法的调用过程

①创建时：

一、“Render”阶段

先执行构造函数constructor：一个组件首先要创建出来

getDerivedStateFromProps：用于从一些外部的属性初始化一些状态，从这个方法返回的状态都可merge到当前的状态上

render：描述你的UI的dom结构的地方，这个也是唯一一个必须定义的生命周期方法

二、“Pre-commit”阶段

无生命周期方法

三、“Cimmit”阶段

（React先更新Dom和refs）

componentDidMount：可以做一些想发起Ajax请求、处理一些定义的外部资源等有副作用的事情

②更新时：

大概三种方式触发更新：

New props、setState()、forceUpdate()

一、“Render”阶段

getDerivedStateFromProps：（创建时里已经讲过）

shouldComponentUpdate：这个方法可以对更新做一些“拦截”，在这个里面可以做一些性能优化的事情，比方说props发生了变化，但是UI不需要发生变化，这个时候你就可以返回false就不更新UI。

render：计算背后的虚拟dom，用来维持内部的一些UI的状态，计算一些diff等等

二、“Pre-commit”阶段

getSnapshotBeforeUpdate：获取render之前的DOM状态，具体使用

三、“Cimmit”阶段

（React先更新Dom和refs）

componentDidUpdate：可以在update之后自己定义一些需要的事情：比方说你有一篇文章是根据url中id作为参数来决定显示什么内容，在这里可以根据id获取文章内容

③卸载时：

卸载时直接进入“cimmit”阶段

componentWillUnmount：可能会做一些资源释放的事情

3、具体的生命周期方法

一、constructor：

①用于初始化内部状态，但是使用较少

②唯一可以直接修改state的地方

二、getDerivedStateFromProps：

①当state需要从props初始化的时候使用

②尽量不要使用：维护两者状态一致性会增加复杂度

③每次render都会调用

④典型场景：表单控件获取默认值

三、componentDidMount

①UI渲染完成后调用

②只执行一次

③典型场景：获取外部资源

四、componentWillUnmounted

① 组件移除时被调用

② 典型场景：资源释放

五、getDerivedStateFromProps

① 在页面render之前调用，state已经更新

② 典型场景：获取render之前的DOM状态

六、componentDidUpdate

① 每次UI发生更新的时候都会调用

② 典型场景：页面需要根据props变化重新获取数据

七、shouldComponentUpdate

① 决定Virtual DOM是否要重绘

② 一般可以由PureComponent自动实现

③ 典型场景：性能优化

4、具体实例

这是React官方文档里面时钟组件的代码，实现了一个时钟组件

import React from "react";

export default class Clock extends React.Component {
     
  constructor(props) {
     
    super(props);
    console.log("Clock constructed");
    this.state = {
      date: new Date() };
  }

  componentDidMount() {
     
    console.log("Clock did mount");
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
     
    console.log("Clock will unmount");
    clearInterval(this.timerID);
  }

    //这个生命周期方法对于这个组件是多余的
  componentDidUpdate() {
     
    console.log("Clock did update");
  }

  tick() {
     
    this.setState({
     
      date: new Date(),
    });
  }

  render() {
     
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {
     this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

丢掉tick()不管，我们来看看这个例子中的生命周期方法

创建时

constructor、render、componentDidMount

首先constructor初始化一个时间状态，

然后调用render方法，里面描述了你定义的UI，

然后commit，

最后调用componentDidMount改变状态

更新时

render、componentDidUpdate

render方法计算背后的虚拟dom，得到一些diff，

然后去commit更新UI

componentDidUpdate可以不要

卸载时

componentWillUnmount

把定时器清除

5、总结

在一个组件里，不是每一个生命周期方法都会被实现，必须实现的生命周期方法只有render方法。事先了解每个具体的方法的应用场景是很有必要的。

参考资料：

官方文档：https://zh-hans.reactjs.org/docs/state-and-lifecycle.html

参考视频：https://time.geekbang.org/course/detail/100009301-9440?utm_source=pinpaizhuanqu&utm_medium=geektime&utm_campaign=guanwang&utm_term=guanwang&utm_content=0511