小道具を更新すると、コンポーネント全体が再レンダリングされるべきですか？

Question

私はこのように初期化されるCookingClassコンポーネントを持っているとしましょう。教師の

let teachers = makeTeachers(["Amber", "Jason", "Lily"]) 
let students = makeStudents(["Hopper"]) 

<CookingClass 
    teachers={teachers} 
    students={students} 
/> 

一つが脱落した：

let newTeachers = makeTeachers(["Amber", "Jason"]) 

<CookingClass 
    teachers={newTeachers} 
/> 

それは全体のコンポーネントが再レンダリングするようになります。 Reactがdiffを計算して効率的に再レン​​ダリングするかどうかはわかりませんが、shouldComponentUpdateを使って自分で処理する必要があります。

さらに実際の例では、100万個のマーカーがあり、マーカーの1つを置きたい場合にGoogleマップを実装している可能性があります。

Answer 1

あなたは、いわゆるバーチャルDOMノードを変更しています。仮想ノードのすべての変更に対して、shouldComponentUpdate()が呼び出されます。あなた自身で実装していない場合は、常にreturn true;

CookingClassをリロードしたい場合は、自分で実装する必要があります。

Reactのプロは、仮想DOMで変更されたネイティブDOMノードのみを再レンダリングすることです。これは、リアクトを非常に速くする「レンダリング」です。

Answer 2

本当 DOMレンダリングは完全に非常に効率的なinnerHTMLのインサートと反応して、あなただけのアプリケーションVirtualDomTreeの新しいデータ構造の変化のためで処理されます。

shouldComponentUpdate()コンポーネントがを再計算する必要がある場合は、を再計算します。たとえば、統計データをレンダリングしているときには、これを使用する必要があります。コンポーネントの出力は変更されませんので、返されるのはfalseで、コンポーネントの最初のバージョンはeverのために使用されます）

Answer 3

サンプルコードに基づいて、コンポーネントは毎回再レンダリングされます。

コンポーネントをストアに「接続」するには、react-redux（documentation）バインディングを使用する必要があります。

// ConnectedCookingClass.js 
import { connect } from 'react-redux'; 
import CookingClass from './CookingClass'; 

const mapStateToProps = (state) => { 
    return { 
    teachers: state.teachers, 
    students: state.students 
    }; 
}; 

const ConnectedCookingClass = connect(mapStateToProps)(CookingClass); 

export default ConnectedCookingClass; 

そして、そのように他の場所で、このコンポーネントを使用します。

// OtherComponent.js 
import ConnectedCookingClass from './ConnectedCookingClass'; 

const OtherComponent = React.createElement({ 
    render() { 
    return (
     <div> 
     <ConnectedCookingClass /> 
     </div> 
    ); 
    } 
}); 

---

反応-Reduxのバインディングが小道具で返さのみ再レンダリングコンポーネントと同様に、あなたのためのいくつかのスマートな事を行いますmapStateToPropsは実際には以前の値（via a shallowEqual comparison）とは異なるので、ここでは機能を持たずに値を返すようにしてください。関数はmapDispatchToPropsに返されます。

反応-Reduxの中shouldComponentUpdateのデフォルト実装はtrueを返しますとき：コンポーネントは、小道具を手動で更新されている「純粋な」コンポーネント（別名stateless-function）

（後にある

1. ALWAYS場合
2. ストアが変更され、新しい小道具が古い小道具と異なる場合。

は、ここでそれはsource codeから次のようになります。

shouldComponentUpdate() { 
    return !pure || this.haveOwnPropsChanged || this.hasStoreStateChanged 
}