李恒道 发表于 2022-10-30 07:50:08

【提问】关于React的setState的可变性问题

最近刚开始学习react
关于setstate网上资料说不要直接改变状态
但是根据网上的一些例子以及资料来看
是否是【不允许在不改变state对象的顶层属性的情况下修改属性内的数据】
如现在有一个state为
```
a:{
    b:{
            c:{
                  d"1               
               }
      }
}
```

a必须是不可变的,我们需要重新赋值一份
但是b,c,d应该都是可以直接设置改变的吧
看资料PureComponet和memo也都是做了一个浅层的比较来做渲染优化
那理论来说我直接拷贝一下a对象内的属性
然后copy_a.b.c.d=1
这样顶层的引用出现变化,触发了浅比较来做渲染
但是内部的属性没有进行重新拷贝
也是符合react开发规范的对吗

cxxjackie 发表于 2022-10-30 07:50:09

要看你是浅拷贝还是深拷贝吧,如果是类似这样的写法:
const copy_a = {...a};
这种属于浅拷贝,即copy_a.b与a.b指向同一引用,那你对其下属性的修改就会影响双方,这种应该就不符合规范。

wwwwwllllk 发表于 2022-10-30 11:04:07

嘿嘿,感觉道哥应该说的是改变对象的状态吧,对象的状态要{...obj}好像是,useMeno,useCallback这种优化阶段的一不用就忘记了。

李恒道 发表于 2022-10-30 11:53:48

wwwwwllllk 发表于 2022-10-30 11:04
嘿嘿,感觉道哥应该说的是改变对象的状态吧,对象的状态要{...obj}好像是,useMeno,useCallback这种优化阶 ...


想表达的意思是我知道state的第一层是必须要改变的
但是他的子属性是不是只需要改状态,不用重新拷贝也是符合开发规范

wwwwwllllk 发表于 2022-10-30 12:59:59

李恒道 发表于 2022-10-30 11:53

想表达的意思是我知道state的第一层是必须要改变的
但是他的子属性是不是只需要改状态,不用重新拷贝 ...

感觉这种情况不用考虑吧,如果是一些对象嵌套多层的情况。要不然就是前端写死不经常改变的数据。如果是后端返回。setState绝对是一个新的对象,页面肯定会重新渲染。只有出现定义一个对象 ,然后setState的是这个对象名,这个时候就要考虑是否监听到对象里面的属性发生变化了。
道哥可以去读下源码,然后分享一下,我学习一下。

李恒道 发表于 2022-10-30 14:26:23

wwwwwllllk 发表于 2022-10-30 12:59
感觉这种情况不用考虑吧,如果是一些对象嵌套多层的情况。要不然就是前端写死不经常改变的数据。如果是后 ...

我也想
呜呜呜
react语法都没摸清
有点看不懂源码
感觉vue调试更简单一点
顺着入口一路看就7788
react看一眼就恐惧

李恒道 发表于 2022-10-31 05:22:55

cxxjackie 发表于 2022-10-30 20:37
要看你是浅拷贝还是深拷贝吧,如果是类似这样的写法:

这种属于浅拷贝,即copy_a.b与a.b指向同一引用,那 ...

懂了...
国内国外好多人都直接尝试修改state再用setstate设置回去...
不过如果state是完全不可变的
那比较深层的变量的修改不是火葬场了....

shabby 发表于 2022-10-31 10:04:02

李恒道 发表于 2022-10-31 05:22
懂了...
国内国外好多人都直接尝试修改state再用setstate设置回去...
不过如果state是完全不可变的


https://github.com/immerjs/immer

李恒道 发表于 2022-10-31 10:36:02

shabby 发表于 2022-10-31 10:04
https://github.com/immerjs/immer
我草
牛逼!
我说为啥我感觉手动改那么费劲
原来有库啊...

cxxjackie 发表于 2022-10-31 20:28:54

李恒道 发表于 2022-10-31 05:22
懂了...
国内国外好多人都直接尝试修改state再用setstate设置回去...
不过如果state是完全不可变的


简单点可以JSON.stringify再JSON.parse实现深拷贝,或者优化一下结构,尽量不要套太深。
页: [1]
查看完整版本: 【提问】关于React的setState的可变性问题