reactjs - 我应该使用 useEffect() 进行 dom 操作还是直接进行操作？

Question

在 React docs I see this piece of code :

function Example() {
  const [count, setCount] = useState(0);

  //THE SUBJECT OF MY QUESTION:
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

所以，我的问题是为什么不使用 useEffect 更改 document.title 或任何其他 DOM，如下所示:

function Example() {
  const [count, setCount] = useState(0);

  //THE SUBJECT OF MY QUESTION:
  document.title = `You clicked ${count} times`;

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

我知道，例如发送请求时，它是异步的，我们需要在 useEffect 中进行。但是 DOM 操作不是异步的，它花费的时间相对为 0，为什么我们还要使用 useEffect 钩子(Hook)呢？

Answer 1

其几乎 一样，看我的相关回答，useEffect in-depth .

不同之处在于一个显着的“陷阱”，useEffect回调执行 after the render phase .

const App = () => {
  useEffect(() => {
    console.log("executed after render phase");
  });

  console.log("executed at render phase");

  return <></>;
};

将导致:

executed at render phase
executed after render phase