なぜ、小道具がrenderとcomponentWillReceivePropsで異なる値を表示するのですか？

Question

なぜ小道具がレンダリングとcomponentWillReceivePropsで異なる値を表示するのか教えてください。 buttonをクリックすると、レンダリングとcomponentWillReceivePropsの両方の関数が呼び出されますが、（this.props.val）の値が異なるのはなぜですか？ここで

は、任意のプロパティ値が変更され、コンポーネントがnextPropsコレクションでそれを受信するたびにComponentWillReceivePropsトリガ、コード https://codesandbox.io/s/g5119XP2Z

class App extends Component { 
    update(){ 
    render(<App val={this.props.val + 1 }/>, document.getElementById('root')); 

    } 

    componentWillReceiveProps(nextProps){ 
    console.log(nextProps.val); 
    console.log("===================="); 
     console.log(this.props.val,"val"); 

    } 
    render(){ 
    console.log("render========") 
      console.log(this.props.val,"val render"); 

    return (

    <div style={styles}> 
    <button onClick={this.update.bind(this)}>{this.props.val}</button> 
    <h2>Start editing to see some magic happen {'\u2728'}</h2> 
    </div> 
) 

Answer 1

名の通りです。このイベントは変更された値を探し、コンポーネントの小道具コレクションを新しい値で更新します。それ以降はrenderが完璧に実行されます。

詳細：

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/component_will_receive_props.html