javascript - 在React中修改某些值时为什么要使用setState？

Question

我是 React 的初学者。现在我正在研究 setState() 方法。

我正在根据初学者教程的指导进行学习，但有一些东西我无法理解。

本教程讨论的主题是制作计数器组件，当我们单击加号或减号按钮时，该组件会显示变化的值。

这个例子是这样的:

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}   

在学习的过程中，我想到了这个方法:

function Counter() {
    let number = 0;
    
    const onIncrease = () => {
        console.log({number});
        number++;
        console.log({number});
    }
    const onDecrease = () => {
        number-=1;
    }
    
    return (
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    )
}

您可能很容易意识到，它不起作用。

但我不明白为什么它不能正常工作。我认为这似乎与我们使用 setState() 的原因有关。

感谢您的关心，如果您能留下回复，我将不胜感激。

Answer 1

重新分配变量本身(几乎)永远不会有任何副作用 - 这不仅在 React 中如此，在所有 JavaScript 中也是如此。您需要以某种方式告诉 React，它知道值已更改并且组件需要重新渲染结果 - 因此需要函数调用(setNumber).

在 React 的范例中，组件的渲染方式在很大程度上应该完全由该组件的状态(和 props)决定。 React 可以轻松跟踪状态和 props 的更改 - 它不能(JavaScript 中的任何东西都不能)自动跟踪重新分配的变量。

调用像 setNumber 这样的状态 setter 告诉 React:

1. 更新该组件的 React 内部状态数据
2. 重新渲染组件

如果您只是重新分配一个变量，例如 number++，则这些都无法完成。