在类组件中反应 useLayoutEffect 等效项答案

【问题标题】：React useLayoutEffect equivalent in class component在类组件中反应 useLayoutEffect 等效项
【发布时间】：2020-08-21 10:16:10
【问题描述】：

我们如何在类组件中模仿useLayoutEffect() 的功能？

假设我们的功能组件是

function MyFuncComponent() {
  useLayoutEffect(() => {
    runSideEffect();
  });
}

假设这个特殊的副作用不需要清理，下面的代码是否等效？

class MyClassComponent extends React.Component {
  componentDidMount() {
    runSideEffect();
  }
  componentDidUpdate() {
    runSideEffect();
  }
}

从文档看来，它们并不完全相同，因为多个预定的 useLayoutEffect()s 在连续渲染之间被刷新，但 componentDidUpdate()s 不是。这种理解是否正确，如果正确，我们如何模仿useLayoutEffect()？

在 useLayoutEffect 中安排的更新将在浏览器有机会绘制之前同步刷新。

【问题讨论】：

尝试 getSnapshotBeforeUpdate。它应该可以工作。

标签： reactjs react-hooks

【解决方案1】：

根据doc

如果您从类组件迁移代码，请注意 useLayoutEffect 在与 componentDidMount 和 componentDidUpdate 相同的阶段触发。但是，我们建议先从 useEffect 开始，并且仅在导致问题时才尝试 useLayoutEffect。

因此，如果您希望副作用在具有相同行为的类组件中运行，您必须像您想的那样使用 componentDidMount 和 componentDidUpdate。 useEffect 和 useLayoutEffect 的区别在于 useEffect 仅在 DOM 更新后运行（效果将在渲染提交到屏幕后运行）。 useLayoutEffect 将在计算 DOM 突变后立即触发效果。因此，在 useLayoutEffect 中安排的更新将在浏览器有机会绘制之前同步刷新。

Here 关于 useEffect 和 useLayoutEffect 有很好的解释。但是考虑类组件，它相当于componentDidMount和componentDidUpdate，因为它是提交阶段。这是允许对 DOM 进行更改以及副作用和计划更新的阶段。 componentDidMount 和 componentDidUpdate 都具有与 useLayoutEffect 一样的同步行为。 useEffect 是通常推荐的选项，因为它不会阻塞浏览器渲染，在大多数情况下性能更好，它是 componentDidMount 和 componentDidUpdate 的优化钩子版本。

【讨论】：