【React】为什么需要通过 setState 更新已经修改的数组？

在 React 中，状态管理是组件交互的核心。本文将详细解读以下代码逻辑，探讨为什么需要使用 setState 明确通知 React 即使数据已经更新，也要显式调用更新方法。

const init = () => {
   
    for (let i = 0; i < 10; i++) {
   
        customList.push(i); // 修改了数组
    }
    setCustomList([...customList]); // 通知 React 更新状态
};

一、代码逻辑解析

1. 功能概述

代码的主要功能是初始化一个数组 customList，将数字 0 到 9 依次加入数组，然后通过 setCustomList 更新状态，触发组件重新渲染。

2. 核心逻辑

• 直接操作数组： 使用 customList.push(i) 将数字依次添加到数组中，这是一种直接修改原数组的操作。
• 状态更新： 调用 setCustomList([...customList])，将 customList 展开为一个新数组，并更新状态，触发 React 的重新渲染。

---