2017-11-30 3 views
0

Reactアプリケーションのパフォーマンスを向上させるにはどの方法が最適であるのだろうか。コンポーネントのライフサイクルメソッドcomponentWillReceivePropsshouldComponentUpdateについて知りましたが、私が望ましくない再レンダリングを避けるために理想的に実装する必要があるコンポーネントがどれかわかりません。理想的に改善する方法React performance:componentWillReceiveProps vs shouldComponentUpdate

両方を実装するか、そのうちの1つだけ実装するのが最善でしょうか?

また、shouldComponentUpdateがを受け取っている理由はわかりません。componentWillReceivePropsが既にそれらを処理している必要があります。

+0

パフォーマンスの向上はプロファイリングから始まります。いったん何が減速すれば、それを最適化するための集中的な努力をすることができます。 – teivaz

答えて

0
componentWillReceiveProps(props) { 
    console.log("componentWillReceiveProps"); 
    return false; // This will not terminate further control flow in this component. 
} 

shouldComponentUpdate(props, newState) { 
    console.log("shouldComponentUpdate"); 
    return false; // This terminates further control flow in this component. 
} 

条件に基づいて、shouldComponentUpdateメソッドからブール値を返すことができます。 falseを返す場合は、componentWillUpdate()メソッドは呼び出されません。

+1

'componentWillReceiveProps'が2番目の(' newState')引数を受け取ったとは思いません。また、ブール値を返さなければならないとは思わない。 – Koen

+0

@Koenあなたは正しいです。 2番目の引数はありません。 'return'ステートメントの場合、私は' componentWillReceiveProps'がスキップレンダリングの場所ではないと説明しようとしていました。 –

+0

_ "小道具が変更されていなくても、componentWillReceivePropsが呼び出される可能性があります。" _ - [これから](https://reactjs.org/blog/2016/01/08/A-implies-B-does-not- imply-B-implies-A.html) –

関連する問題