React中两种数组状态添加值方式的差异及最优方案咨询

一、React数组状态添加值的最佳实践 #

• 优先用函数式更新：当新状态需要基于旧状态生成时，一定要用setState的函数形式。因为React状态更新是异步的，直接引用外部状态变量可能拿到过期值，通过函数参数获取的最新状态才可靠，示例：setArr(prev => [...prev, newItem])。
• 绝对不直接修改原数组：别用push、splice这类直接修改原数组的方法，必须返回新数组。React依赖状态的引用变化触发重新渲染，修改原数组会导致React检测不到状态变更，页面无法更新。常用的生成新数组的方式有扩展运算符...、concat、map等。
• 批量添加更高效：如果要一次性添加多个元素，直接用扩展运算符把新数组展开追加，比如setArr(prev => [...prev, ...newItemsArray])，比循环逐个添加效率更高。

二、两段代码的核心差异 #

1. 第一段代码解析 #

setOtoValue((current) => [
  ...current,
  Buffer.from(arraybuf, 'binary').toString('base64')
])

• 采用函数式更新：通过current参数获取当前最新的数组状态，无论何时调用，都能确保基于最新状态更新，不会因为React异步更新机制导致状态过期。
• 添加单个元素：将二进制的arraybuf转换为base64字符串，作为单个元素追加到原数组末尾。
• 适用场景：适合每次只需要添加一个元素的场景，尤其是在异步操作（如文件读取、API回调）后更新状态的情况，这种写法最稳妥。

2. 第二段代码解析 #

setegcValue([
  ...egcvalue,
  ...a.data.content.split(',').map(i => Number(i))
])

• 采用直接更新：直接引用外部的egcvalue状态变量来构建新数组。
• 批量添加多个元素：先将字符串a.data.content按逗号分割为字符串数组，再将每个元素转换为数字，最后通过扩展运算符将所有数字批量追加到原数组末尾。
• 潜在风险：如果这段代码在异步操作（如定时器、API请求）中执行，egcvalue可能还是更新前的旧值，导致状态更新丢失——因为React会批量处理状态更新，外部状态变量不会实时同步最新值。

3. 核心差异对比 #

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