React useLayoutEffect 等效于类组件

Question

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

假设我们的功能组件是

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

假设此特定副作用不需要清理，以下代码是否等效？

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

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

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

Answer 1

根据文档

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

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

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