React中在Effect Hook内更新document.title的底层原理及疑问

先看你提到的官方示例代码：

import React, { useState, useEffect } from 'react';

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

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

针对你的三个疑问，解答如下：

1. Effect Hook内更新document.title的底层逻辑，以及外部执行的问题 #

useEffect的执行时机是组件渲染完成、真实DOM更新之后，此时组件的状态（比如count）已经是最新值，能确保标题和页面显示的点击次数完全一致。

如果在组件函数顶层直接执行document.title = ...，会带来这些问题：

• 每次组件渲染（包括初始渲染和状态更新后的重渲染）都会执行，即使状态没变化也会重复修改标题，造成不必要的性能浪费；
• 渲染过程是React的纯计算阶段，此时真实DOM还没更新，若依赖的状态在渲染中发生变化，可能拿到旧值，导致标题和页面内容不一致；
• 在服务端渲染场景下，服务端没有document对象，直接执行会抛出错误。

另外，React要求组件函数是纯函数（给定相同输入返回相同输出，无副作用），顶层执行副作用会破坏这个特性，导致渲染行为不可预测。

2.