reactjs - 在类组件中 react useLayoutEffect 等效项

Question

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

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

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

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

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

Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.

Answer 1

根据doc

If you’re migrating code from a class component, note useLayoutEffect fires in the same phase as componentDidMount and componentDidUpdate. However, we recommend starting with useEffect first and only trying useLayoutEffect if that causes a problem.

因此，如果您希望您的副作用在具有相同行为的类组件中运行，您必须像您想的那样使用 componentDidMount 和 componentDidUpdate。 useEffect 和 useLayoutEffect 的区别在于 useEffect 仅在 DOM 更新后运行(效果将在渲染提交到屏幕后运行)。 useLayoutEffect 将在计算 DOM 突变后立即触发效果。因此，在 useLayoutEffect 中安排的更新将在浏览器有机会绘制之前同步刷新。
Here关于 useEffect 和 useLayoutEffect 有一个很好的解释。但是考虑类组件，它相当于componentDidMount和componentDidUpdate，因为它是提交阶段。这是允许对 DOM 进行更改以及副作用和计划更新的阶段。 componentDidMount 和 componentDidUpdate 都具有与 useLayoutEffect 一样的同步行为。 useEffect 是通常推荐的选项，因为它不会阻塞浏览器渲染，这在大多数情况下对性能更好，是 componentDidMount 和 componentDidUpdate 的优化 Hook 版本。