componentwillreceiveprops()执行多次是为什么？

Question

在componentwillreceiveprops里面打印nextProps,发现打印了4次，但是props只发生了一次变化，为什么会打印4次呢？

Answer 1

父元素的render函数被调用，子组件就会触发componentWillReceiveProps。不管props有没有改变。

Answer 2

打印一下每次的nextpros都是啥，这些props都是从哪里传过来的

Answer 3

估计是在什么地方偷偷setState了吧
在render里写匿名函数也会触发多余的渲染
比如

<div onClick={ () => { console.log('test') } }></div>

Answer 4

当父组件的props变化或者render触发时，都会触发componentWillReceiveprops，不是本身的props变化才触发。

Answer 5

这位仁兄说的对，@白吟灵 ，“父组件render，子组件就会触发componentWillReceiveProps方法”，有例为证：

class Button extends React.Component {
  constructor(props) {
      super(props);
      this.state = {data: 0};
      this.setNewNumber = this.setNewNumber.bind(this);
  }
  
  setNewNumber() {
    this.setState({data: this.state.data + 1})
  }
  render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <h3 style={{color: 'red'}}>{this.state.data}</h3>
            <Content myNumber = {2}></Content>
         </div>
      );
    }
}


class Content extends React.Component {
  
  componentWillReceiveProps(newProps) {
        console.log('Component WILL RECEIVE PROPS!')
  }
  
 
    render() {
      return (
        <div>
          <h3>{this.props.myNumber}</h3>
        </div>
      );
    }
}

刚测试过的，点击了Button组件的按钮，每次都会触发Content组件的componentWillReceiveProps。

父组件render了，即使子组件的属性并未改变，可却依然调用了componentWillReceiveProps方法。