使用 useLayoutEffect React 的问题

Question

Hook useEffect 异步运行，通常在 DOM 渲染/挂载之后运行，而 useLayoutEffect 同步运行，在 DOM 渲染/挂载之前运行。

使用我的示例 useEffect，一切正常，我得到了想要的结果（我存储了用户使用 useRef 输入的先前值）。

但是使用我的示例 useLayoutEffect，我没有得到想要的结果，因为它在我的例子中就像 useEffect 一样工作。 我认为它应该首先更新prevName.current = name并且仅在渲染后导致该人输入的值相同。 我认为，在那种情况下， prevName.current和name都应该呈现为相同的值。 但那不会发生。

你能解释一下为什么吗？

这是 codesandbox： Sandbox

这是代码：

import React, { useLayoutEffect } from "react";
import "./styles.css";
import { useState, useRef, useEffect } from "react";

export default function App() {
  const [name, setName] = useState("");
  const prevName = useRef(name);

  useLayoutEffect(() => {
    prevName.current = name;
  }, [name]);

  return (
    <div className="App">
      <input
        value={name}
        onChange={(e) => {
          setName(e.target.value);
        }}
      ></input>
      <div>Your name is {name}</div>
      <div>Your previous name is {prevName.current}</div>
    </div>
  );
}

Answer 1

Hook useEffect 异步运行，通常在 DOM 渲染/挂载之后运行，而 useLayoutEffect 同步运行，在 DOM 渲染/挂载之前运行。

它们都发生在将更改放入 DOM 之后。 布局效果的特别之处在于，如果在布局效果时设置state，则渲染结果会同步完成。 对于普通效果，如果设置 state，它会很快重新渲染，但不会同步。 如果您从未设置 state（如您的示例中所示），那么您使用哪个不会有太大区别。

useLayoutEffect 最常见的应用是你想要渲染一次，测量 dom 上的东西，然后再次渲染而不让用户看到你在 dom 上的临时东西。