react Immutability 理解

在开发过程中经常会遇到state里有数组和对象的情况,比如当用splice去改变数组再调用setState更新的时候,会发现并没有生效,这是因为react里的state是Immutability(不可变的),所以要保证state是Immutability,但是数组和对象并不是Immutability,这时需要用一些手段去保证Immutability。

1、状态类型是不可变类型(数值、字符串、布尔值、null、undefined)

  因为状态是不可变类型,所以直接赋一个新值即可

2、状态的类型是数组时(concat、slice、filter、ES6 spread syntax)

  数组的push、pop、splice等方法都会修改原数组,不能保证Immutability

3、状态的类型是对象时(Object.assign()、object spread syntax)

4、还可以使用一些Immutable的库

 

react中的state是Immutability有什么好处呢?

这里涉及到react的性能优化,react内部会维护一份UI(虚拟DOM),当组件属性或状态发生改变,react对应的虚拟DOM数据也会更新,不用更新真正的DOM,更加方便快捷,然后react会对现在和更新前的虚拟DOM进行比较,找出变化的元素,只有变化的元素会在真实DOM中更新,但是有时候一些DOM元素自身没有变化,但会被其他元素影响造成重新渲染,这个时候可以用shouldComponentUpdate方法来判断props或state是不是真的改变了(改变了返回true,否则返回false)。如果组件的属性和状态是Immutability的对象或值,就可以通过相等来比较了

转载于:https://www.cnblogs.com/ruoshuisanqian/p/10542836.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值