为何React useEffect Hook需配合useState而非普通变量？

先看两个对比示例：

能正常工作的写法 #

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

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

  // 类似于componentDidMount和componentDidUpdate：
  useEffect(() => {
    // 使用浏览器API更新文档标题
    document.title = `You clicked ${count} times`;
  });

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

无法正常工作的写法 #

import React, { useEffect } from 'react';

function Example() {
  var count = 0;

  // 类似于componentDidMount和componentDidUpdate：
  useEffect(() => {
    // 使用浏览器API更新文档标题
    document.title = `You clicked ${count} times`;
  });

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

为什么普通变量不行？ #

React的核心逻辑是状态驱动视图更新，只有被React管理的状态变化，才会触发组件重新渲染。

用普通变量var count = 0时，点击按钮修改count只是改变了一个局部变量，但React完全不知道这个变化——它不在React的状态追踪体系里。组件初始化时会渲染一次，但之后没有任何机制通知React重新渲染，所以页面上的数字不会更新；同时useEffect也不会重新执行，因为React没追踪到count的变化，自然不会触发副作用更新。

更关键的是，就算你强制让组件重新渲染，普通变量会在每次渲染时被重新初始化，之前修改的值会直接丢失，回到初始的0。

useState的核心优势 #

• 自动触发视图更新：调用setCount修改状态时，React会立刻感知到变化，触发组件重新渲染，让页面内容和状态保持同步，这是普通变量做不到的。
• 状态持久化：组件每次重新渲染时，useState会保留上一次的状态值，不会像普通变量那样被重置。
• 可追踪的状态变化：React会追踪useState状态的更新，你可以通过钩子的依赖数组（比如useEffect(() => {}, [count])）精准控制副作用的执行时机，避免不必要的渲染，提升性能。
• 符合React设计模式：遵循单向数据流的规则，状态变化可预测，组件逻辑更清晰，便于调试和维护复杂应用。

内容的提问来源于stack exchange，提问作者Mason Stevens