"数据没有发生变化的时候，直接不做处理" 的疑问

Question

   componentWillReceiveProps(nextProps) {
    console.log('this.props is:', this.props)
    console.log('nextProps is:', nextProps)
    let categoryIdChange = this.props.categoryId !== nextProps.categoryId,
      parentCategoryIdChange = this.props.parentCategoryId !== nextProps.parentCategoryId
    // 数据没有发生变化的时候，直接不做处理
    if (!categoryIdChange && !parentCategoryIdChange) {
      console.log('数据不做处理')
      return
    }
    // 假如只有一级品类
    if (nextProps.parentCategoryId === 0) {
      this.setState({
        firstCategoryId: nextProps.categoryId,
        secondCategoryId: 0
      })
    }
    // 有两级品类
    else {
      this.setState({
        firstCategoryId: nextProps.parentCategoryId,
        secondCategoryId: nextProps.categoryId
      },
      () => {
        parentCategoryIdChange && this.loadSecondCategory()
      }
    )
    }
  }

运行场景是: 某商品有一级和二级品类，当第一次点编辑按钮进入到该商品编辑页面的时候 通过console.log打印出如下信息

发现"数据没有发生变化的时候，直接不做处理"这段代码运行了。我的问题是为什么调用了loadSecondCategory后 componentWillReceiveProps 又被执行了一次? 这种行为对吗? 而我的环境按照老师的代码写下来 同样的场景 在loadSecondCategory调用后 却不会第二次调用componentWillReceiveProps。

麻烦老师解答下，谢谢！

Answer 1

Rosen 2018-05-01 12:54:46

只要父组件有变化的时候，子组建的componentWillReceiveProps就会被调用，这是react的设计。

如果你loadSecondCategory没有触发父组件的变化，就不会有componentWillReceiveProps的调用

• 提问者 ywang04 #1

  谢谢老师回复， 追加一个问题哈：是不是父组件的任何state发生变化 哪怕不属于这个子组件的状态 也会触发该子组件的componentWillReceiveProps调用？

• Rosen 回复 提问者 ywang04 #2

  对的，可以写个demo试下就知道了