React测试组件WillReceiveProps

Question

我是React.js的新手。在试图理解React中的生命周期时，我偶然发现了组件WillReceiveProps。即使我掌握了其他功能，我仍然无法确定组件是否会接收道具。我创建了一个小片段，每次单击按钮时，我都会递增变量“val”。当val变为5的倍数时，我想更改“递增”的值，但我无法这样做。

我的代码是：

var Increment = React.createClass({
  getInitialState: function() {
    return {val: 0, increasing: false};
  },
  componentWillMount: function() {
    console.log("componentWillMount");
  },
  componentDidMount: function() {
    console.log("componentDidMount");
  },
  handleClick: function() {
    console.log("inHandleClick");
    console.log(this.state.val);
    this.setState({val: (this.state.val+1)});
  },
  componentWillReceiveProps : function(nextProps) {
    this.setState({
      increasing: (nextProps.val > this.props.val)
    });
  },
  shouldComponentUpdate: function(nextProps, nextState) {
    return (nextState.val % 5 ==0)
  },

  render: function() {
    console.log(this.state.increasing);
    return (
      <div>
        <button onClick={this.handleClick}>{this.state.val}</button>
      </div>
    );
  }
});


ReactDOM.render(<Increment />, mountNode);

有线索吗？提前谢谢

Answer 1

看到这把小提琴了吗

var IncrementButton = React.createClass({
  componentWillReceiveProps : function(nextProps) {
    this.setState({
      increasing: (nextProps.val > this.props.val)
    });
  },
    render: function() {
    return (<button onClick={this.props.handleClick}>{this.props.val}</button>);
  }
});

var Increment = React.createClass({
  getInitialState: function() {
    return {val: 0, increasing: false};
  },
  handleClick: function() {
    console.log("inHandleClick");
    console.log(this.state.val);
    this.setState({val: (this.state.val+1)});
  },
  shouldComponentUpdate: function(nextProps, nextState) {
    return (nextState.val % 5 ==0)
  },
  render: function() {
    console.log(this.state.increasing);
    return (
      <div>
        <IncrementButton handleClick={this.handleClick} val={this.state.val}/>
      </div>
    );
  }
});

React.render(<Increment />, mountNode);

（感谢@Aaron在下面提供了更准确的描述）组件将接收道具在组件道具设置好后调用；注意，即使道具的值没有变化，它也可能被调用（您似乎在使用大于支票时考虑到了这一点）。因为您想要比较props的新值和旧值，所以需要在组件外部管理状态。因此，在本示例中，我通过提取按钮将组件拆分为两部分。