想问一个SCU的问题
来源:7-23 React性能优化-SCU一定要配合不可变值
白夜2021
2022-01-19
老师,您在讲SCU时,说这种写法会导致SCU函数,旧值和新值一样,会导致bug
父组件在state里定义了fruits数组,然后往数组添加数据:
this.state.fruits.push( { id: +new Date(), name: '西瓜'+Math.random() * 100 })
this.setState({
fruits: this.state.fruits
})
子组件:
shouldComponentUpdate(nextProps, nextState) {
console.log(nextProps.fruits, this.props.fruits)
if (_.isEqual(nextProps.fruits, this.props.fruits)) {
return false
}
return true
}
我把nextProps.fruits, this.props.fruits都打印出来,确实是一样的,scu返回false。
但是,我尝试这样写了一下:
父组件定义了一个数字类型的count然后加1:
this.state.count = this.state.count + 1;
this.setState({
count: this.state.count
})
子组件:
shouldComponentUpdate(nextProps, nextState) {
console.log(nextProps.count, this.props.count)
if (this.props.count === nextProps.count) {
return false
}
return true
}
输出的 nextProps.count, this.props.count 是不一样的,新值比旧值多了1,scu就返回true了。
上下两处代码出现差异的原因是因为 fruits是对象类型的,nextProps.fruits 和 this.props.fruits 都指向了同一个地址吗?
写回答
1回答
-
前者是引用类型,后者是值类型,俩这不一样。
两个引用类型指向了同一个对象,而两个值类型就是两个不同的值
032022-01-20
相似问题
面试中被问到了这样两个问题
回答 1
今天面试一个关于this的问题
回答 2