用大数组反应 useState() 钩子

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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

React useState() hook with large array