首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
dobelee
V2EX  ›  React

9102 了, React 更新 state 数组的最优解是什么?

  •  
  •   dobelee · 54 天前 · 1179 次点击
    这是一个创建于 54 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

    12 回复  |  直到 2019-12-25 17:28:04 +08:00
    s609926202
        1
    s609926202   54 天前
    同,想知道正确的操作。
    hua123s
        2
    hua123s   54 天前 via iPhone
    同,想知道怎么操作
    lijsh
        3
    lijsh   54 天前
    你这嵌套过多了,先将数据 normalize 再放进 state
    seki
        4
    seki   54 天前
    ???
    这当然是不可行的

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

    数据太多卡住了应该先去去分析瓶颈,而不是用反模式的代码来引入潜在的 bug
    fuermosi777
        5
    fuermosi777   54 天前
    immutable library?
    Mikewu
        6
    Mikewu   54 天前
    https://immerjs.github.io/immer/docs/introduction
    可以考虑一下 immer.js ,我认为是接入成本最小的 immutable data 方案了
    wangxiaoaer
        7
    wangxiaoaer   54 天前
    @lijsh #3

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

    这个结构不算嵌套很多吧。
    lijsh
        8
    lijsh   54 天前
    @wangxiaoaer #7 那直接整个 array 覆盖感觉也行啊,只要绑定好 key,只有修改的 item 才会重新 render
    wangxiaoaer
        9
    wangxiaoaer   54 天前
    @lijsh #8 reactjs 不太熟悉,我只是直觉认为他这个结构还是比较常用的,不算嵌套太多。
    muzuiget
        10
    muzuiget   54 天前
    那个警告是对的,你搜到那个代码是错的,之所以有效是因为每次调用 this.setState() 都会强制重 render 了。

    不见得卡使用个更新数据姿势问题,你应该优化 render 里的数据量,比如延迟加载,先跳过看不见的条目。
    newbieRenew
        11
    newbieRenew   54 天前 via iPhone
    immerjs 来处理吧,我目前用的是 immutable-helper,数据量小,没遇到瓶颈问题。下个项目试试 immer
    maomaomao001
        12
    maomaomao001   54 天前
    mobx
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3077 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 12:09 · PVG 20:09 · LAX 04:09 · JFK 07:09
    ♥ Do have faith in what you're doing.