React testing 'componentWillReceiveProps'

Question

私はReact.jsの初心者です。 Reactのライフサイクルを理解しようとしているうちに、私はcomponentWillReceivePropsを見つけました。私は他の機能を持っているにもかかわらず、私はまだcomponentWillReceivePropsを理解することができません。私はすべてのボタンをクリックすると、私は変数 '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

のおかげでは、コンポーネントの小道具がセットされます場合 componentWillReceivePropsが呼ばれる（以下、より正確な説明については@Aaronのおかげで）this fiddle

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); 

を参照してください。小道具の価値が変わっていなくても呼び出されることに注意してください。新しい値のpropsを古い値と比較したいので、コンポーネントの外部で状態を管理する必要があります。したがって、このサンプルでは、​​ボタンを抽出してコンポーネントを2つに分割しています。