为什么 useEffect 和 useLayoutEffect 显示相同的值？

Question

据我了解，React 在浏览器中打印 DOM 之前执行useLayoutEffect ，然后执行useEffect 。 例如考虑这个组件：

const App = () => {
  useLayoutEffect(() => {
    console.log(document.body.scrollHeight); // shows 1024
  }, [])

  useEffect(() => {
    console.log(document.body.scrollHeight); // shows 1024
  }, [])

  return (
    <div style={{ height: 1024 }}></div>
  )
}

我预计，它显示0用于useLayoutEffect和1024用于useEffect ，但两者都显示1024

我认为<div style={{ height: 1024 }}></div>在useLayoutEffect之后打印，但显然它不正确......？？？

Answer 1

useEffect和useLayoutEffect都在初始渲染后运行，因此它们将打印相同的 output。

您可能错过了此示例中useLayoutEffect的实际用途，请在 此处阅读更多相关信息