关于pureComponent浅比较的问题
来源:7-24 React性能优化-PureComponent和memo
白夜2021
2022-01-21
老师你好,您在课堂中提到,pureComponent 浅比较只比较对象的第一层数据,但为什么我定义了层次很深的对象,pureComponent也能对比出来呢?changeObjName 函数运行后生效了
class ArrList extends React.PureComponent {
constructor() {
super()
this.state = {
obj: { age: {value: {num: {a: {b:{c:{d:{e:{name: '孙悟空'}}}}}}}} },
}
}
changeObjName = ()=>{
var copy = JSON.parse(JSON.stringify(this.state.obj));
copy.age.value.num.a.b.c.d.e.name = '猪八戒';
this.setState({
obj: copy
})
}
render() {
return <div>
<ul>
<li>
{this.state.obj.age.value.num.a.b.c.d.e.name }
</li>
</ul>
<button onClick={this.changeObjName }>change name</button>
</div>
}
}
写回答
1回答
-
你理解的稍微有一点点偏差。我再解释一下:
PureComponent 所负责的范围,就是浅比较,比较第一层属性。如果属性再深了,那 PureComponent 就管不着了,就需要你自己手写代码去深度比较。
所以,你 state 层级很深,已经超出了 PureCompnent 的管理范围(跟不用 PureComponent 一样),还是会照常触发组件更新的。
052022-01-23
相似问题