chave
Ao escrever subcomponentes dinâmicos, se nenhuma prop chave for adicionada ao subitem dinâmico, um aviso será relatado:
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.
Esse aviso significa que, se cada componente filho for uma matriz ou iterador, deve haver uma propriedade de chave exclusiva.
O que exatamente este adereço-chave faz?
Otimização de desempenho de componentes
Vamos imaginar que, se precisarmos renderizar uma lista de classificação com 5000 itens, e a classificação for atualizada a cada poucos segundos
, a maioria das classificações são apenas mudanças de posição, algumas são completamente atualizadas e outras são. a lista.
Nesse ponto, a chave entra em jogo, são os adereços usados para identificar a singularidade do item atual. Agora tente descrever este cenário,
temos uma série de notas dos alunos:
[{
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>
);
}
Definimos a chave para o número de série e isso realmente não reportará um aviso, mas esta é uma prática muito ineficiente. Nós fabricamos anéis
muitas vezes fazemos o ambiente sob tal erro, toda vez que a chave é usada para o Virtual DOM diff, e cada número de aluno é usado para
um problema mais novo e único é que ele não corresponde às informações dos alunos, equivalente a Se um Se for usada uma chave aleatória, a
atualização será renderizada novamente, independentemente de haver os mesmos itens .
A abordagem correta também é muito simples, basta alterar o conteúdo da chave para o sid:
import React from 'react';
function Rank({
list }) {
return (
<ul>
{
list.map((entry, index) => (
<li key={entry.sid}>{entry.name}</li>
))}
</ul>
);
}
Como o React será renderizado quando as chaves forem as mesmas? A resposta é renderizar apenas o primeiro item com a mesma chave, e um aviso será relatado:
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.
Portanto, existe um princípio para a chave, ou seja, ela é única, e não precisa ser percorrida ou valores aleatórios, a menos que o conteúdo da lista
não seja uma representação única e não haja nenhum atributo correspondente.
Com relação às chaves, uma coisa que precisamos saber é que quando há dois subcomponentes que precisam ser renderizados, não podemos
definir chaves para eles . Neste momento, você precisa usar o plug-in React createFragment para resolver:
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>
);
}
No código acima, as chaves do primeiro e segundo adereços são as chaves do objeto que definimos.