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

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

(Благодаря @Aaron для более точного описания ниже) componentWillReceiveProps называется, если реквизит вашего компонента получить набор; обратите внимание, что это можно назвать даже при том, что реквизит не изменился по значению (вы, похоже, учитываете это с большим, чем чек). Поскольку вы хотите сравнить новое значение реквизита со старым значением, вам нужно, чтобы состояние было управляемым вне вашего компонента. Поэтому в этом примере я разбил ваш компонент на две части, извлекая кнопку.