javascript - 即使它在屏幕上没有改变，componentDidUpdate如何获取更新的dom元素

Question

在浏览 hooks 文档时，我偶然发现 useLayoutEffect 的时间与 componentDidMount 和 componentDidUpdate 的时间相同。我无法理解这个阶段的行为。由于这个阶段与绘画阶段同步，我开始测试一个假设。

如果我在渲染中更新元素的高度，并且 componentDidUpdate 与绘制同步运行，那么当我读取元素的高度时，它不应该使用最新值进行更新。据我了解，reflow/paint 只会在 React 写入 DOM 时发生。

所以为了测试这个阶段的行为，我创建了以下元素

```<div id="random_test_dummy" style={{height: `${this.state.heightRandom}px`}}></div>```

在构造函数中初始化 heightRandom 如下：

```this.state={heightRandom: 5};```

然后我像这样设置一个 setInterval 调用：

```componentWillMount() {
    this.clearInterval = setInterval(() => {
      this.setState((prevState) => ({heightRandom: prevState.heightRandom+5}));
    }, 10000);
  }```

所以基本上每 5 秒我将random_test_dummy元素的高度更新5px。

现在我在 componentDidUpdate 中设置以下代码

```componentDidUpdate() {
    alert(document.getElementById("random_test_dummy").clientHeight);
  }```

现在，当我的代码运行时，警报显示10，但是屏幕尚未更新，并且它的高度在 chrome DevTools的元素选项卡中为5px 。

我不明白如何更新从 DOM 读取的高度，但屏幕上的节点不会更新。如果我删除警报并在 console.log() 语句上添加调试点，则 DOM 节点会在屏幕上更新。这个同步更新阶段的实际表现如何？

标签： javascriptreactjs