用大数组反应 useState() 钩子答案

【问题标题】：React useState() hook with large array用大数组反应 useState() 钩子
【发布时间】：2020-07-04 05:51:59
【问题描述】：

使用 React 钩子，如果我们需要更新一个大型状态数组的一个元素，直接修改状态然后用它调用 set 是一种反模式吗？或者是否有必要先复制一个巨大的数组以传递给 set()？我想避免在每次状态更改时复制一个大数组。下面的代码不好吗？

const [bigArray, setBigArray] = useState(Array(SOME_HUGE_NUMBER).fill(false));

bigArray[15] = true;
setBigArray(bigArray);

【问题讨论】：

【解决方案1】：

您不应该直接修改状态，这可能会导致错误。所以最佳实践是克隆数组，然后修改该值。

如果您不使用该变量，它将自动被垃圾收集，因此它不会影响性能。考虑以下示例：

const bigArrayTmp = [... bigArray] ; 
bigArrayTmp[15] = true; 
setBigArray(bigArrayTmp);

在这段代码之后如果bigArrayTmp 没有被使用，它将被垃圾回收。所以不会占用你的记忆。

【讨论】：

【解决方案2】：

在 React 中修改像 state 这样的常量变量不是一个好习惯。在设置之前先尝试克隆数组。

let newArr = [...bigArray]
newArr[15] = true
setBigArray(newArr)

【讨论】：