在 React 函数组件中，直接用 const itemList = [] 声明数组会导致每次组件重渲染时被重新初始化为空数组，无法累积数据；正确做法是使用 useState 或 useRef 管理该数组状态。

很多刚接触 React 函数组件的开发者，都遇到过这样一个常见问题：明明在代码里定义了一个数组，每次点击按钮也往里面添加了新元素，可列表就是显示不出来，或者永远只显示最新添加的那一项。

问题的根源，就在于那句看似无害的 const itemList = []。这行代码定义的不是 React 状态，而是一个普通的局部变量。每次组件函数执行（即每次渲染发生时），这个变量都会被重新创建并初始化为一个全新的空数组。因此，每次添加操作其实都是在往一个“新”的空数组里添加元素，之前的数据自然就丢失了。要解决 React 函数组件中本地数组状态的重置问题，必须借助状态管理机制。

正确解法：使用 useState 持久化数组状态

要让数据在渲染之间“活下来”，必须使用 React 的状态管理机制。最直接、最推荐的做法就是使用 useState Hook，将数组声明为受控状态。

import { useState } from 'react';

function App() {
  const [item, updateItem] = useState('');
  const [itemList, setItemList] = useState([]); //  使用 useState 持久化数组

  const listenInput = (e) => {
    updateItem(e.target.value);
  };

  const addItem = () => {
    if (item.trim() === '') return; // 防止添加空字符串
    setItemList(prev => [...prev, item]); //  函数式更新：基于上一状态追加
    updateItem(''); // 可选：清空输入框
  };

  return (
    <>
      

        

          
To Do
          
          +
          

            {itemList.map((it, idx) => (
              
{it}
            ))}
          
        
      
    >
  );
}

export default App;

这段代码做了几个关键改进，值得细品：

• 状态持久化：useState([]) 确保了 itemList 在组件的整个生命周期内保持一致，React 会负责在渲染之间记住它，从而实现 React 函数组件中本地数组的持久化。
• 函数式更新：setItemList(prev => [...prev, item]) 这种方式能确保你总是基于最新的状态进行更新，完美避开异步更新可能带来的闭包陷阱。
• 受控组件：为 绑定 value={item} 和 onChange 事件，让 React 状态成为表单数据的唯一来源，状态与DOM始终保持同步。
• 列表渲染与健壮性：使用 .map() 渲染列表并赋予 key，是 React 性能优化的基础。同时，添加 trim() 校验也提升了代码的健壮性。

补充说明：使用 useRef 持久化数据而不触发渲染

那么，是不是所有需要跨渲染的数据都得用 useState 呢？也不尽然。如果你的需求仅仅是在内存中暂存数据，且不希望数据变化触发组件重新渲染，那么 useRef 会是更合适的选择。

比如，记录用户的操作日志、缓存一些中间计算结果等场景。

const itemListRef = useRef([]);

// ...
const addItem = () => {
  itemListRef.current.push(item);
  console.log(itemListRef.current); //  数据持久存在，但不会引起重渲染
};

这里需要划一个重点：useRef 的 .current 属性是可变的，其变化不会触发组件重新渲染。这意味着，如果你用 useRef 来存储一个数组并驱动 UI 列表，即使数组内容变了，视图也不会更新。所以，凡是需要反映到界面上的动态数据，useState 依然是唯一正解。

说到底，React 函数组件本质就是一个函数。每次渲染都是一次全新的函数调用，函数内部所有普通变量都会被重新初始化。因此，所有需要“记住”上一次渲染结果的数据，都必须通过 useState、useRef、useReducer 等 React Hook 来显式声明和管理。理解并掌握这一点，是写好 React 函数组件的基本功，也是避免本地数组状态每次渲染被重置的关键。