React组件重渲染疑惑：状态突变后页面不更新原因咨询

你的问题核心在于违反了React的state不可变性原则，以及React对state更新的批量处理逻辑，具体拆解如下：

1. React的state更新判断逻辑 #

React通过浅比较来决定是否触发重渲染：

• 如果state是基本类型（如数字、字符串），直接比较值是否相等；
• 如果state是引用类型（如对象、数组），只比较引用地址是否相同，不会深比较属性内容。
  这意味着，即使你修改了state对象的属性，但只要引用没变化，React就会认为state没有更新，不会触发后续的DOM更新流程。

2. 你的代码执行流程问题 #

在handleMove函数中，每次pointerMove触发时的执行步骤导致了矛盾：

• 第一步：创建新对象newPos并调用setPosition(newPos)——这里传入了新的对象引用，React会标记需要更新，准备触发重渲染。
• 第二步：直接修改闭包中捕获的旧state对象position的属性——这属于突变state，React无法追踪这个修改，而且此时的position是上一次渲染周期的state对象，已经不属于当前React管理的state了。
• 第三步：调用setPosition(position)——这里传入的是旧的对象引用（虽然属性被修改，但地址没变）。

由于React在同一事件循环中会批量处理setState请求，最终会以最后一次的更新为准。当最后一次传入的state引用和当前React管理的state引用相同时，React会判定state没有变化，直接跳过DOM更新步骤。

3. 组件函数执行≠DOM更新 #

你看到日志中组件函数持续被调用，是因为第一次setPosition(newPos)确实触发了重渲染；但第二次setPosition(position)覆盖了更新请求，导致React在完成组件函数执行后，判定不需要更新DOM，所以网页上的内容不会同步变化。

正确的写法 #

永远遵循state不可变性原则，每次更新都传入新的对象：

function App() {
  const [position, setPosition] = useState({x: 0, y: 0});

  console.log(position);

  const handleMove = (e) => {
    // 每次都创建新对象，保证引用变化
    setPosition({x: e.clientX, y: e.clientY});
  };

  return (
    <div onPointerMove={handleMove}>
      <h1>{position.x}</h1>
      <h1>{position.y}</h1>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者SEUNG CHEOL LEE