パフォーマンス比較t​​his.setState（this.state）vs this.setState（{}）

Question

私は、私はAPIからデータを取得するシナリオがあります。この場合、私のcomponentWillReceiveProps（）は、ストアから新しい値を取得するたびにトリガされます。

componentWillReceiveProps(newProps){ 
    if(newProps.listOne){ 
    this.state.listOne = newProps.listOne; 
    } 
    if(newProps.listTwo){ 
    this.state.listTwo = newProps.listTwo; 
    } 

    this.setState(this.state); 

} 

ここで、反応するdocごとにthis.setState（this.state）;を使用することは不適切です。

私は状態にすべてのデータをコピーした後にそうレンダリング私の心の状態を更新する方法は、ケース1では

componentWillReceiveProps(newProps){ 
    if(newProps.listOne){ 
    this.setState({listOne : newProps.listOne}); 
    } 
    if(newProps.listTwo){ 
    this.setState({listTwo : newProps.listTwo}); 
    } 

} 

になることを維持することは、一度だけトリガされます。 ケース2では、If条件が満たされるたびにレンダリング（およびすべての中間ライフサイクル）がトリガーされます。

私はパフォーマンスがどのように改善するのか分かりません。条件付きの国家の更新が1つではなく多くのことについて話していると言いましょう。

Answer 1

あなたは一度だけsetStateを呼び出したい場合、あなたはこのようにそれを行うことができます。

componentWillReceiveProps(newProps) { 
    // Copy the state instead of mutating this.state directly. 
    const state = { ...this.state }; 

    if (newProps.listOne) { 
     state.listOne = newProps.listOne; 
    } 

    if (newProps.listTwo) { 
     state.listTwo = newProps.listTwo; 
    } 

    this.setState(state); 
} 

あなたはさらに、Immuable.jsなどのライブラリによって、真に不変のデータ構造を使用することによりここに向上させることができます。

ただし、このような手動バッチ更新は、パフォーマンスの観点からは必要ありません。 Reactは内部的にこれらの更新をライフサイクルのフックなので一括してバッチします。ただし、setStateのコールバックを使用する場合は意味があります。