キー
動的サブコンポーネントを作成するときに、動的サブアイテムにキープロップが追加されていない場合、警告が報告されます。
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method
of 'App'. See https://fb.me/react-warning-keys for more information.
この警告は、各子コンポーネントが配列またはイテレータである場合、一意のキープロップが必要であることを意味します。
このキープロップは正確に何をしますか？
コンポーネントのパフォーマンスの最適化
5000アイテムのランキングリストをレンダリングする必要があり、ランキングが数秒ごとに更新される
場合、ほとんどのランキングは位置の変更だけであり、いくつかは完全に更新され、いくつかはクリアされていると想像してみてください。リスト。
この時点で、キーが機能します。これは、現在のアイテムの一意性を識別するために使用される小道具です。ここで、このシナリオを説明してみましょう。
一連の学生の成績があります。
[{
sid: '600211',
name: 'Cam',
}, {
sid: '600243',
name: 'Arcthur',
}, {
sid: '600225',
name: 'Echo',
}]
其中，sid 是学号，name 是名字。那么，我们来实现成绩排名的榜单：
import React from 'react';
function Rank({
list }) {
return (
<ul>
{
list.map((entry, index) => (
<li key={index}>{entry.name}</li>
))}
</ul>
);
}
キーをシリアル番号に設定しました。これは実際には警告を報告しませんが、これは非常に非効率的な方法です。リングを製造し
ていると、このような間違いで環境が悪化することがよくあります。キーがVirtual DOM diffに使用されるたびに、各学生番号がより
新しくユニークな問題に使用されます。ランダムキーを使用
すると、同じアイテムがあるかどうかに関係なく、更新が再レンダリングされます。
正しいアプローチも非常に簡単です。キーの内容をsidに変更するだけです。
import React from 'react';
function Rank({
list }) {
return (
<ul>
{
list.map((entry, index) => (
<li key={entry.sid}>{entry.name}</li>
))}
</ul>
);
}
キーが同じ場合、Reactはどのようにレンダリングしますか？答えは、同じキーで最初のアイテムのみをレンダリングすることであり、警告が報告されます。
Warning: flattenChildren(…): Encountered two children with the same key, `.$a`. Child keys must be unique;
when two children share a key, only the first child will be used.
したがって、キーには原則があります。つまり、キーは一意であり、リストのコンテンツが
一意の表現でなく、一致する属性がない場合を除いて、トラバースまたはランダムな値である必要はありません。
キーに関して、知っておく必要があることの1つは、レンダリングする必要のあるサブコンポーネントが2つある場合、それらの
キーを設定できないことです。現時点では、ReactプラグインのcreateFragmentを使用して以下を解決する必要があります。
import React from 'react';
import createFragment from 'react-addons-create-fragment';
function Rank({
first, second }) {
const children = createFragment({
first: first,
second: second,
});
return (
<ul>
{
children}
</ul>
);
}
上記のコードでは、1番目と2番目の小道具のキーは、設定したオブジェクトのキーです。