【提问】关于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

要看你是浅拷贝还是深拷贝吧，如果是类似这样的写法：

1. const copy_a = {...a};

复制代码

这种属于浅拷贝，即copy_a.b与a.b指向同一引用，那你对其下属性的修改就会影响双方，这种应该就不符合规范。

wwwwwllllk

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

李恒道

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

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

wwwwwllllk

李恒道 发表于 2022-10-30 11:53
对
想表达的意思是我知道state的第一层是必须要改变的
但是他的子属性是不是只需要改状态，不用重新拷贝 ...

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

李恒道

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

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

李恒道

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

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

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

shabby

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

https://github.com/immerjs/immer

李恒道

shabby 发表于 2022-10-31 10:04
https://github.com/immerjs/immer

我草
牛逼！
我说为啥我感觉手动改那么费劲
原来有库啊...

cxxjackie

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

简单点可以JSON.stringify再JSON.parse实现深拷贝，或者优化一下结构，尽量不要套太深。