key
When writing dynamic sub-components, if no key prop is added to the dynamic sub-item, a warning will be reported:
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.
This warning means that if each child component is an array or iterator, then there must be a unique key prop.
What exactly does this key prop do?
Component performance optimization
Let's imagine that if we need to render a ranking list with 5000 items, and the ranking will be updated every few seconds
, most of the rankings are just changes in position, a few are completely updated, and a few are It is cleared out of the list.
At this point, the key comes into play, it is the props used to identify the uniqueness of the current item. Now try to describe this scenario,
we have an array of student grades:
[{
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>
);
}
We set the key to the serial number, and this will indeed not report a warning, but this is a very inefficient practice. We manufacture rings
often make the environment under such a mistake, every time the key is used for Virtual DOM diff, and each student numbers are used to more
new and unique problem is that it does not match the information the students, equivalent to With a random key, the
update will be re-rendered regardless of whether there are the same items .
The correct approach is also very simple, just change the content of the key to the sid:
import React from 'react';
function Rank({
list }) {
return (
<ul>
{
list.map((entry, index) => (
<li key={entry.sid}>{entry.name}</li>
))}
</ul>
);
}
How will React render when the keys are the same? The answer is to only render the first item with the same key, and a warning will be reported:
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.
Therefore, there is a principle for the key, that is, it is unique, and it does not need to be traversed or random values, unless the content of the list
is not a unique representation, and there is no matching attribute.
Regarding keys, one thing we need to know is that when there are two sub-components that need to be rendered, we cannot
set keys for them . At this time, you need to use the React plug-in createFragment to solve:
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>
);
}
In the above code, the keys of the first and second props are the keys of the object we set.