在React中修改值时为什么需要使用setState？

• React 不会响应普通 JS 变量的修改
  React 采用状态驱动UI的渲染模式，只有调用React提供的状态更新API（比如useState返回的setter函数、类组件的setState方法）修改数据时，React才会感知到数据变化，主动触发组件重新渲染，将最新数据同步到页面上。直接修改let声明的普通变量，React无法感知这个操作，自然不会更新UI。

• 函数组件每次重渲染都会重新执行整个函数体
  就算存在其他触发重渲染的操作，写在函数体内部的let number = 0会在每次组件执行时被重新初始化为0，之前对number的修改会被完全覆盖，根本无法保留更新后的值。

教程中的写法能正常运行，是因为useState做了两件核心的事：

1. 把状态值存储在React内部维护的组件状态节点中，不会随着组件重渲染被重置，每次渲染时useState都会返回当前最新的状态值
2. 调用setNumber时，React会先更新内部存储的number状态，再主动触发Counter组件的重渲染，渲染时会把最新的number值填充到页面的
   标签中，完成UI更新。

补充说明：console.log能看到number自增是因为事件处理函数在首次渲染时生成，闭包引用了首次渲染上下文里的number变量，点击按钮修改的只是这个闭包内的变量值，没有触发重渲染，所以页面上显示的永远是首次渲染时的初始值0，和闭包里修改的变量已经属于不同的渲染上下文。

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