React@16.x（6）核心概念-生命周期

下雪天的夏风

已于 2024-06-03 22:15:14 修改

阅读量1k

点赞数 25

分类专栏： react16 文章标签： react.js javascript 前端

于 2024-05-22 20:10:28 首次发布

本文链接：https://blog.csdn.net/qq_40147756/article/details/138771409

版权

react16 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

1，初始化 constructor

同一个组件对象只会创建一次。
在构造函数中，不能使用 this.setState()。

该方法在组件挂载到 DOM 之前是不可用的。在执行构造函数时，挂载过程还没有开始。

初始化状态和属性：

constructor(props) {
    super(props)
    this.state = {
        num: 0
    }
}

2，render

返回一个虚拟DOM，会被挂载到虚拟DOM树中，最终渲染到页面的真实DOM中。
render可能不止运行一次，只要需要重新渲染，就会运行。
严禁使用 setState，因为可能会导致无限递归渲染。

3，componentDidMount

只会执行一次。
可以使用setState。
通常情况下，会将网络请求、启动计时器等一开始需要的操作，在该函数中执行。

4，getDerivedStateFromProps

通过参数可以获取新的属性和状态。
该函数是静态的。
该函数的返回值会覆盖掉组件状态。
该函数使用场景极少。

state = {
    n: this.props.n
}
static getDerivedStateFromProps(props, state) {
    console.log("getDerivedStateFromProps");
    // return null; // 不改变当前状态
    return { // 用新的对象替换掉之前的状态
        n: props.n
    }
}

5，shouldComponentUpdate

通过返回 true 和 false 来决定，是否要重新渲染该组件。
默认情况下，会直接返回 true（返回 false 则结束，不会执行 render）。

shouldComponentUpdate(nextProps, nextState) {
    console.log("是否应该重新渲染", this.props, nextProps, this.state, nextState)
    if (this.props.n === nextProps.n && this.state.n === nextState.n) {
        return false;
    }
    return true;
}

6，getSnapshotBeforeUpdate

真实DOM构建完成，但还未实际渲染到页面上。
在该函数中，通常用于实现一些附加的dom操作。
该函数的返回值，会作为 componentDidUpdate 的第三个参数（所以需要成对出现）。

7，componentDidUpdate

虚拟DOM已重新挂载到页面成为真实DOM。
往往在该函数中操作 dom，改变元素。

getSnapshotBeforeUpdate = (prevProps, prevState) => {
    console.log("getSnapshotBeforeUpdate");
    return 132;
}

// prevProps，prevState 都是更改前的内容。
componentDidUpdate(prevProps, prevState, snap) {
    console.log("componentDidUpdate", snap); // 123
}