时间戳

首页 > 解决方案 > 在 componentDidUpdate 之前调用 React 生命周期渲染

javascript - 在 componentDidUpdate 之前调用 React 生命周期渲染

问题描述

我对生命周期顺序/执行的发生方式以及事物在 DOM 中的呈现方式有些困惑。

因此，如果我采用下面的示例，我发现在 5 秒后，控件会render在转到componentDidUpdate. 然而，在渲染中，它能够在componentDidUpdate调用之前打印更新的状态值，即 XYZ。那么这是如何工作的，虽然 componentDidUpdate 说我们可以访问其中的 DOM 节点，但我不知何故认为那componentDidUpdate是状态实际更新的时候。不知道就我的理解而言差异在哪里？

    import React, { Component } from "react";
    
    export default class getSnapshotBeforeUpdateMethod extends Component {
      constructor(props) {
        console.log("1 constructor");
        super(props);
        this.state = {
          name: "ABC"
        };
      }
    
      componentDidMount() {
        console.log("2a componentDidMount");
        setTimeout(() => {
          console.log("2b Inside componentDidMount");
          this.setState({ name: "XYZ" });
        }, 3000);
      }
      getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log("3 getSnapshotBeforeUpdate");
        document.getElementById("previous-state").innerHTML =
          "The previous state was " + prevState.name;
      }
      componentDidUpdate() {
        console.log("4 componentDidUpdate");
        document.getElementById("current-state").innerHTML =
          "The current state is " + this.state.name;
      }
      render() {
        console.log("5 render");
        return (
          <>
            <h5>This is a {this.state.name}</h5>
            <p id="current-state"></p>
            <p id="previous-state"></p>
          </>
        );
      }
    }

Codesandbox 链接 https://codesandbox.io/s/class-lifecycle-method-order-0zjk4?file=/src/App.js:0-1055

标签： javascriptreactjsreact-hooks

解决方案

也许回顾一下反应生命周期图可能会有所帮助。

在此处输入图像描述

请注意，render生命周期方法是在“渲染阶段”期间调用的，当 React 渲染出 virtualDOM 以计算它需要提交或刷新到实际 DOM 的差异时。另请注意，此阶段的函数/方法是纯的，没有副作用，并且可能会被 React 暂停、中止或重新启动（强调我的）。

现在请注意，componentDidUpdate当 DOM 已更新和呈现时，会发生在“提交阶段”。

你console.log在render方法中是一个无意的副作用，但它会向你展示它何时被调用相对于componentDidUpdate.

render被调用一次，或者可能多次，before componentDidUpdate被调用一次，每个渲染周期。

推荐阅读