特定の子コンポーネントを再描画しないようにする

Question

私はいくつかの子コンポーネントを条件付きでレンダリングする反応コンポーネントを持っています。簡体字コードだけです：

render(): { 
    const component1 = condition ? renderComponent2() : null; 
    const component2 = renderComponent2(); 

    return (
    <div> 
     {component1} 
     {component2} 
    </div> 
); 
} 

問題はいつでもcondition変更component2が破壊され、再レンダリングなっているということです。私はそのことを防ぎ、元の要素を守っています。幸運にもkeyをcomponent2に追加しようとしました。

[編集] component1が常に存在する場合でも、これが起こっていると私はCSSでそれを隠したりしないように、それにフラグを変更：/

Answer 1

は、あなたがshouldComponentUpdateでそれをやってみましたがありますか？これはまさにこの関数が使われるべきものです。 component2に追加して、内部に適切な条件を追加してください。

Answer 2

例コードを構成すると、component2は破棄されずに再度マウントされます。 Reactはrenderと他のライフサイクルメソッドを実行しますが、 React will 更新 DOM内のコンポーネントが適切に実行されます。

多分あなたのコードはもっと複雑です。これは、あなたがcomponent2を再レンダリングしていないと思うのを反応させる代わりに、全く新しいコンポーネントをレンダリングしようとしています。しかし、やはりあなたのサンプルコードから、これは明らかではありません。

あなたは以下のことを実行している、proof of concept codepen hereを見つけることができます。

• それは緑の背景で、component2の2つのインスタンスをレンダリングします。
• ボタン（不正に）は、反応の知識の外に、最初のコンポーネントの背景色を赤に変更します。
• ボタンをクリックすると、reactが2つのコンポーネントを再描画します。
• 背景色は赤色のままです。これは、コンポーネントの更新のみに反応し、破壊しないという証拠です。

リアクションはバックグラウンドカラーが変更されず緑色であると反応するので、バックグラウンドカラーを緑色にリセットしません。

UPDATE：今codepenもそれが起こることができる方法のさらなる証拠含まれています。あなたがHTMLの種類は、（概念実証に<p>要素から<h1>要素に）戻っ変更した場合

• を
• は意志を反応させますそれを同じ要素として認識せず、オリジナルを破棄して新しい要素を挿入します。

PS：サンプルコードではメソッド呼び出しによってコンポーネントが作成されるため、ライフサイクルメソッド（shouldComponentUpdateなど）は適用しないでください。メソッドを介したコンポーネントのレンダリングは、単純なコンポーネント、つまり反応要素に対してのみ行う必要があります。、

A ReactElementが軽いDOM要素の、不変、仮想 表現ステートレス：official docs here参照してください。

Answer 3

conditionに状態変化がある場合、コンポーネント自体が再レンダリングされるため、component2も変更されます。