9102 了， React 更新 state 数组的最优解是什么？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 1795 天前的主题，其中的信息可能已经有所发展或是发生改变。

state.array 是个庞大的数组。需要更新某个索引的内容。首先

state.array[999]['field'] = true;

有 react/no-direct-mutation-state 警告，但实际是可行的。

google 众说纷纭，不引入其他库时，被推荐最多的是类似如下模式：

let array = state.array;
array[999]['field'] = true;
this.setState({ array })

这种很显然有性能问题，数据太多卡如🐶。

13 条回复 • 2020-02-24 16:30:05 +08:00

s609926202

2019-12-25 15:51:36 +08:00

同，想知道正确的操作。

hua123s

2019-12-25 15:53:44 +08:00 via iPhone

同，想知道怎么操作

lijsh

2019-12-25 16:02:34 +08:00

你这嵌套过多了，先将数据 normalize 再放进 state

seki

2019-12-25 16:03:56 +08:00

？？？
这当然是不可行的

state.array 是一个引用，你修改 array 变量和直接修改 state.array 没有任何区别，甚至 array[999] 也不会因为你 setState 而更新

数据太多卡住了应该先去去分析瓶颈，而不是用反模式的代码来引入潜在的 bug

fuermosi777

2019-12-25 16:10:13 +08:00

immutable library?

Mikewu

2019-12-25 16:11:28 +08:00

https://immerjs.github.io/immer/docs/introduction
可以考虑一下 immer.js ，我认为是接入成本最小的 immutable data 方案了

wangxiaoaer

2019-12-25 16:12:03 +08:00

@lijsh #3

```
state:{
array:[
{field:true},
....
]
}
```

这个结构不算嵌套很多吧。

lijsh

2019-12-25 16:17:12 +08:00

@wangxiaoaer #7 那直接整个 array 覆盖感觉也行啊，只要绑定好 key，只有修改的 item 才会重新 render

wangxiaoaer

2019-12-25 16:19:49 +08:00

@lijsh #8 reactjs 不太熟悉，我只是直觉认为他这个结构还是比较常用的，不算嵌套太多。

muzuiget

2019-12-25 17:13:01 +08:00

那个警告是对的，你搜到那个代码是错的，之所以有效是因为每次调用 this.setState() 都会强制重 render 了。

不见得卡使用个更新数据姿势问题，你应该优化 render 里的数据量，比如延迟加载，先跳过看不见的条目。

newbieRenew

2019-12-25 17:25:30 +08:00 via iPhone

immerjs 来处理吧，我目前用的是 immutable-helper，数据量小，没遇到瓶颈问题。下个项目试试 immer

maomaomao001

2019-12-25 17:28:04 +08:00

mobx

Hanggi

2020-02-24 16:30:05 +08:00

原来 React 整天在研究这种问题。