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

react 为什么要求数据不可变

  •  1
     
  •   kwoktung · 2020-04-21 11:09:27 +08:00 · 3071 次点击
    这是一个创建于 1437 天前的主题,其中的信息可能已经有所发展或是发生改变。
    类似的库 https://immerjs.github.io/immer/docs/introduction 和 各种教程 react 要求数据不可变;标志性用法 this.setState({ ...state, a: '1' })

    但是其实 this.setState({ a: '1' })就可以。react 本身背自己进行 merge 操作吗。例如进行 object.assign({}, state1, state2);

    本质上 setState 只是做一个“脏标记”,告诉 react 我这个可能组件“脏”,可能需要刷新。那么干什么还要求数据不可变啊。

    有大佬吼一声吗?
    8 条回复    2020-09-22 11:32:21 +08:00
    seki
        1
    seki  
       2020-04-21 11:15:24 +08:00
    你说的 setState 的写法没什么问题

    所谓的数据不可变指的是 state 里面的变量不能被 mutate
    比如 state.foo 是一个 array,于是下面的写法就是有问题的

    const { foo } = this.state
    foo.push(1)
    this.setState({ foo })
    randyo
        2
    randyo  
       2020-04-21 11:16:55 +08:00 via Android
    shintendo
        3
    shintendo  
       2020-04-21 11:21:21 +08:00
    你举的这个例子,跟数据不可变没什么关系吧
    otakustay
        4
    otakustay  
       2020-04-21 11:27:28 +08:00
    state 是个数据的容器,本身不是数据。state 里面的每一个属性才是数据
    容器没必要不可变,但容器里面的数据必须不可变
    roscoecheung1993
        5
    roscoecheung1993  
       2020-04-21 11:42:53 +08:00
    不可变数据只需要一次浅比较就可以确定整棵子树是否需要更新,merge 视情况可能需要遍历组件树到比较深的层级,在 state 复杂的时候不可变数据会有性能提升。其他好处还包括方便做快照,方便 debug 等等。。
    kwoktung
        6
    kwoktung  
    OP
       2020-04-21 11:54:08 +08:00 via Android
    @roscoecheung1993 方便做快照和方便 debug 怎么说?有例子吗?
    roscoecheung1993
        7
    roscoecheung1993  
       2020-04-21 14:14:07 +08:00
    @kwoktung 参考二楼的链接和 react 文档性能优化一节,简单来说数据不可变的结果是每次更新使用全新的一整个对象,更方便记录
    linZ
        8
    linZ  
       2020-09-22 11:32:21 +08:00   ❤️ 1
    一旦你的子组件,从 props.a.b 获取内容时,如果 b 改变而 a 没有不变,那么你的子组件并不会变化。到时候会蛋疼的很。当然,你可以用 useEffect,然后把 props.a.b 放入依赖中,我猜就解决这个问题了。(我猜的,不过这么写也太难受了吧)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2325 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 00:01 · PVG 08:01 · LAX 17:01 · JFK 20:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.