React中普通数组无法留存数据，useState数组可行的原因？

1. 普通数组的问题：组件重渲染时会被重置 #

你在组件里声明的const toDoList = [];是函数组件内部的局部变量，React函数组件每次重新渲染（比如调用setInput更新输入值时），整个函数会重新执行一遍，这个变量会被重新初始化为空数组。

你调用addToList时确实给toDoListpush了值，但只要组件一重新渲染，这个数组就变回空的了——之前存的内容全没了，相当于每次都是在一个全新的空数组上操作，自然没法保留数据。

2. useState数组能保留数据的原因：React的状态持久化 #

useState是React专门用来管理组件状态的Hook，它存储的数据是放在React内部的状态容器里的，不会随着组件重渲染而被重置。

每次调用setArray更新状态时，React会把新的数组值存在内部容器里，等到组件下一次重渲染时，会把最新的状态值返回给myArray。所以不管组件渲染多少次，myArray始终能拿到最新的数组内容，自然能保留住之前添加的数据。

额外提醒：不要直接修改useState的状态值 #

你的代码里直接myArray.push(input)是不符合React状态更新规范的——useState的状态是不可变的，直接修改原数组不会触发组件重渲染，正确的写法应该是创建新数组：

setArray(prevArray => [...prevArray, input]);

这样React才能检测到状态变化，重新渲染组件展示最新的列表。

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