为什么React待办列表中普通JavaScript数组无法持久保存提交的条目？

• 函数组件重渲染会重置内部普通变量
  React的函数组件本质是普通JavaScript函数，只要组件的state、props发生变化，或者父组件触发重渲染，整个组件函数就会从头到尾完整执行一次。你代码中的const items = []定义在App函数内部，每次组件重渲染时这行代码都会重新执行，生成一个全新的空数组，上一次提交存在旧数组里的内容会直接丢失。
  你提交后每次打印数组都只有1个元素，原因就是你输入待办内容时会修改inputText这个state，直接触发App组件重渲染，items数组被重置为空，等你提交表单时只会往空数组里push当前输入的内容，自然永远只有1个元素。
• 普通变量修改无法触发组件重渲染
  就算你把items数组挪到组件外部定义，避免被重渲染重置，直接用push修改数组的操作React也无法感知。React只有在检测到state、props更新时才会触发重渲染刷新页面，你修改普通变量的操作不会触发页面更新，列表永远不会展示最新添加的内容。

useState之所以能解决问题，核心有两点：

• 状态持久化：useState存储的数据是绑定在组件内部对应的实例节点上的，不会因为组件函数重新执行就被重置，每次组件重渲染时拿到的都是最新的状态值
• 自动触发重渲染：调用setter函数更新状态时，React会自动调度组件重渲染，页面会根据最新的状态值渲染UI，符合React声明式渲染的设计逻辑

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