React Propsは再レンダリング時にレンダリング時にのみ更新されます

Question

初期レンダリングとは異なるプロップでリアクションコンポーネントを再レンダリングしようとすると、レンダリングが呼び出されたときに更新されたプロット値が表示されます。以前のライフサイクルメソッドはすべて、古いプロップ値を返します。例えば

、次のコード...

componentWillReceiveProps() { 
    console.log("componentWillReceiveProps"); 
    console.log(this.props.calls); 
} 

shouldComponentUpdate() { 
    console.log("shouldComponentUpdate"); 
    console.log(this.props.calls); 
    return true; 
} 

componentWillUpdate() { 
    console.log("componentWillUpdate"); 
    console.log(this.props.calls); 
} 

componentDidUpdate() { 
    console.log("componentDidUpdate"); 
    console.log(this.props.calls); 
} 

render() { 
    console.log("render"); 
    console.log(this.props.calls); 
} 

新しい小道具を再レンダリング...

componentWillReceiveProps 
oldProp 
shouldComponentUpdate 
oldProp 
componentWillUpdate 
oldProp 
render 
newProp 
componentDidUpdate 
newProp 

を返します。誰もがなぜこれが起こっている知っていると私が得ることができる方法を助言していレンダリング前に更新された小道具？

Answer 1

Life Cycle方法をご確認ください。たとえば、コンポーネントがshouldComponentUpdateに更新されるかどうかをチェックするために新しいプロップを取得するには、新しいpropsをパラメータとしてメソッドに渡します。

だから、新しい小道具を取得するには、これを実行する必要があります。

componentWillReceiveProps(nextProps) { 
    console.log("componentWillReceiveProps"); 
    console.log(nextProps.calls); 
} 

shouldComponentUpdate(nextProps) { 
    console.log("shouldComponentUpdate"); 
    console.log(nextProps.calls); 
    return true; 
} 

componentWillUpdate(nextProps) { 
    console.log("componentWillUpdate"); 
    console.log(nextProps.calls); 
} 

componentDidUpdate() { 
    console.log("componentDidUpdate"); 
    console.log(this.props.calls); 
} 

render() { 
    console.log("render"); 
    console.log(this.props.calls); 
} 

Answer 2

新しい小道具は、上記の機能のパラメータになります。

など。 componentWillReceiveProps(newProps)

• this.props
• newPropsは新しい小道具ある古い小道具です。

更新：コンポーネントが新しい小道具を受信して​​いるときに呼び出されcomponentWillReceiveProps

void componentWillReceiveProps(
    object nextProps 
) 

。このメソッドは初期レンダリングのために呼び出されません。

これは、render（）がthis.setState（）を使用して状態を更新することによって呼び出される前に、プロップトランジションに反応する機会として使用します。古い小道具はthis.props経由でアクセスできます。この関数内でthis.setState（）を呼び出すと、追加のレンダリングはトリガーされません。

他の方法でも同様です。

は、更新プロセス（componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate）実際の小道具が更新される前に起こるの一部であるdocs for details