在类组件中反应 useLayoutEffect 等效

Question

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

假设我们的功能组件是

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

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

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

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

在浏览器有机会绘制之前， useLayoutEffect 内计划的更新将同步刷新。

Answer 1

根据文件

\n

\n

如果您\xe2\x80\x99从类组件迁移代码，请注意与和useLayoutEffect处于同一阶段的触发。但是，我们建议首先开始，并且仅在导致问题时才尝试。componentDidMountcomponentDidUpdateuseEffectuseLayoutEffect

\n

\n

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

\n

这里有关于useEffect和 的很好的解释useLayoutEffect。但考虑到类组件，它相当于componentDidMount并且componentDidUpdate因为它是提交阶段。在这个阶段，允许发生 DOM 更改以及副作用和计划更新。和componentDidMount都componentDidUpdate具有同步行为，就像useLayoutEffect. useEffect是通常推荐的选项，因为它不会阻止浏览器渲染，这在大多数情况下性能更好，是componentDidMount和的优化挂钩版本componentDidUpdate。

\n