在类组件中反应等效的useLayoutEffect

如何解决在类组件中反应等效的useLayoutEffect

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

假设我们的功能组件是

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

假设这种特殊的副作用不需要清除，以下代码是否等效？

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

从文档中看，它们似乎并不完全等效，因为在连续的渲染之间刷新了多个计划的useLayoutEffect()，但并非componentDidUpdate()。这种理解正确吗？如果正确，我们如何模仿useLayoutEffect()？

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

解决方法

根据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 的优化钩子版本。