为什么 useState 而不是变量会做出反应？

在 React 中，我们通常使用 useState 来管理组件的状态。相比于使用普通的 JavaScript 变量，使用 useState 的好处是：

1. 自动更新组件

当使用 useState 声明一个状态变量时，React 会在内部自动记录该变量的变化，并在状态变更后重新渲染组件自身及其子组件。这意味着我们不必手动调用 setState 方法，也不必担心组件渲染的正确性问题。

2. 状态抽象

使用 useState 可以将组件的状态抽象出来，使得组件自身更加简洁、可维护。例如，我们可以使用 useState 来管理一个 TodoList 组件的 list 状态：

import React, { useState } from 'react';

function TodoList() {
  const [list, setList] = useState([]);

  const addTodo = (todo) => {
    setList([...list, todo]);
  };

  return (
    <div>
      <ul>
        {list.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={() => addTodo('New todo')}>Add todo</button>
    </div>
  );
}

这样，我们就可以实现对 TodoList 的数据逻辑抽象，为组件的 UI 和交互逻辑服务，而不是让它们混杂在一起。

3. 避免跨组件污染

使用 useState 可以避免状态的跨组件污染问题。在 React 中，每个组件都有自己的状态空间，相互之间是隔离的，不会出现 props drilling 或者全局变量污染的问题。

因此，使用 useState 而不是 JavaScript 变量，有助于提高组件的可维护性、可测试性、可重用性等等，是我们在 React 中编写组件时的一个好习惯。

以上就是为什么我们在 React 中经常使用 useState 而不是普通的 JavaScript 变量的原因。