キーベースの最適化（kbo）とshouldComponentUpdate（scu）は互いにどのように関連していますか？キーとshouldComponentUpdateとの関係はどのように関係していますか？同じではありませんか？
彼らは同じことをしているようです（再レンダリングと差分を避けてください）。
どう違うのですか？何か不足していますか？
私の感想は、キーベースの最適化にscuが「含まれている」ということです。ノードの前のレンダリングと同じキーがツリーの同じパスにある場合、再レンダリングされません。これはkboでも実現できますが、わかりません。
ノードに以前のレンダリングのパスと一致しないパスがあり、scuがfalseを返すと、ノードは再レンダリングされますか？私の推測ははい、確かではありません。
これらは間違いなく同じです。
shouldComponentUpdateは、renderを実行するかどうか、つまりDOM diffと更新が必要かどうかを制御します。このチェックは通常、props,state、またはcontextが変更された場合に発生します。
キーが大きく異なります。同じkeyを使用すると、同じコンポーネントインスタンスが使用されていることを確認できます。考えてみましょう以下：
<MyComponent title="Title 1" />
<MyComponent title="Title 2" />
が場合は、何らかの理由で、あなたのrenderは最初の成分を除去し、あなたがで終わる：
<MyComponent title="Title 2" />
次に何が起こるかは、第二の成分は、DOMから削除されていることです最初は異なるプロパティを取得し、再レンダリングとDOM更新につながります。
あなたは正しくキーを使用する場合：最初の成分を除去した後の
<MyComponent key="key1" title="Title 1" />
<MyComponent key="key2" title="Title 2" />
を、二番目は同じ小道具を受け取ることになります（そのshouldComponentUpdateに応じて再レンダリングされます）が、最も可能性が高いだけDOMの更新があります第1成分の除去。
keyのおかげで、Reactは最小のDOMアップデートを行うことができます。
非管理コンポーネント使用している場合これは、例えば、いくつかの深刻な影響があります。私たちは
<MyComponent title="Title 1" />
<MyComponent title="Title 2" />
を持っていて、第一成分のinputにテキストを書き、とき、再び
const MyComponent =() => {
return <input defaultValue="some-text" />;
};
をコンポーネントを削除すると、そのコンポーネントが含まれている2番目のコンポーネントであっても、テキストは<input>に残ります。キーはそれを防ぐことができます。
また、keyを以前にレンダリングされていないものに設定すると、：
<MyComponent key="key3" />
MyComponentの新しいインスタンスがcomponentDidMountを呼び出して、作成されます。 これは、コンポーネントの状態を完全にリセットするために使用できます（アンマネージド入力など）。
ほとんどの場合、並べ替えや削除などの際にパフォーマンスを向上させるために、keyをリスト内で使用する必要があります。管理されていない入力を使用する副次的な用途がありますが、それだけです。
shouldComponentUpdateと比較すると、キーベースの最適化は、現在のレンダリング状態を前の状態に一致させるのに役立ち、小道具の変更を防ぎます。