想问一个SCU的问题

Question

老师，您在讲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 都指向了同一个地址吗？

Answer 1

双越 2022-01-20 08:40:37

前者是引用类型，后者是值类型，俩这不一样。

两个引用类型指向了同一个对象，而两个值类型就是两个不同的值

• 提问者 白夜2021 #1

  老师，既然对state里的值类型的数据，直接进行修改的话，得到的是两个不同的值，
  nextProps.count 和 this.props.count 不会相等。那是不是意味着，React的“不可变值”这个原则，只针对引用类型的数据才有效？对值类型的数据其实没有太大意义。
  this.state.count = this.state.count + 1;
  this.setState({count: this.state.count})
  nextProps.count !== this.props.count

• 双越 回复 提问者 白夜2021 #2

  我一直都是用不可变数据，到没注意值类型。也建议你一直使用不可变数据，不要管值类型还是引用类型。

• 提问者 白夜2021 #3

  非常感谢！