这可能是一个非常愚蠢的问题，但是我正在React中编写我的第一个项目，并且正在努力了解setState挂钩的用途。
据我了解，setState挂钩用于设置仅在该组件范围内的组件中使用的当前值，并且例如在重新加载页面时该持久值不会持久存在，该值仅保存在内存中，直到它被摧毁了。
我的问题是，使用setState（）存储值与仅声明一个let变量并以常规方式更新它之间有什么区别？两种方法似乎都只保留该组件范围内的非持久值。有什么区别？
状态更改会自动导致您的应用重新呈现（在大多数情况下），因此通常您将数据存储在正在显示的状态中，并且可能会在整个应用中发生更改（菜单的选项可以根据之前的选择进行更改例如）。
React将事件发生时的新/更新状态重新存储为变量，不会触发重新渲染，并且数据通过props从父组件传递到子组件，状态变化可以反映在所有部分。 例如，如果以任何方式修改或更新元素会触发重新渲染，则我们需要在页面上打印100个元素，但是如果修改或更新了变量，则使用var不会导致在数据中不会更新的地方重新渲染
TL; DR ，即使答案不是很长：
setState或useState是React订阅组件状态并在必要时更新组件的关键。使用let变量存储应用程序状态意味着React永远不会了解状态更改，也不会重新渲染和更新组件。
React的核心原理是您的组件以及相应的UI是应用程序状态的函数。当您的应用程序状态改变时，组件“反应”到该状态改变并得到更新。这是一个简单的示例：
const CounterButton = () => {
// Create a state variable for counting number of clicks
const [count, setCount] = React.useState(0);
// Decide what the component looks like, as a function of this state
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
};
ReactDOM.render(<CounterButton />, document.querySelector('#root'));<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>