React 列表 Keys
列表 & Keys
列表
React 列表可以使用 JavaScript 的 map() 方法来创建。如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div><script type="text/babel">
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =><li>{numbers}</li>
);ReactDOM.render(<ul>{listItems}</ul>,document.getElementById('example')
);
</script></body>
</html>
页面效果：
但是，可以看到控制台有报错：
意思就是，每个数组或迭代器中的子元素应该有一个唯一的 “key” 值。
Keys
修改代码，给每个子元素加上唯一的 key 值：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div><script type="text/babel">
function NumberList(props) {const numbers = props.numbers;const listItems = numbers.map((number) =><li key={number.toString()}>{number}</li>);return (<ul>{listItems}</ul>);
}const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(<NumberList numbers={numbers} />,document.getElementById('example')
);
</script></body>
</html>
当在 map() 方法的内部调用元素时，应该为每一个元素加上一个独一无二的 key，这样就不会报错啦。
总结：
Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此，应当给数组中的每一个元素赋予一个确定的标识。- 一个元素的
key最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据的id作为元素的key。 - 当元素没有确定的
id时，可以使用他的序列号索引index作为key；如果列表可以重新排序，不建议使用索引来进行排序，因为这会导致渲染变得很慢。
用keys提取组件
元素的 key 只有在它和它的兄弟节点对比时才有意义。
如果提取一个 ListItem 组件，应该把 key 保存在数组中的这个 <ListItem /> 元素上，而不是放在 ListItem 组件中的 <li> 元素上。
例如，下面的写法是错误的：
function ListItem(props) {const value = props.value;return (// 不需要在这里指定key:<li key={value.toString()}>{value}</li>);
}function NumberList(props) {const numbers = props.numbers;const listItems = numbers.map((number) =>// 元素的key应该在这里指定<ListItem value={number} />);return (<ul>{listItems}</ul>);
}
正确的写法：
function ListItem(props) {// 这里不需要指定key:return <li>{props.value}</li>;
}function NumberList(props) {const numbers = props.numbers;const listItems = numbers.map((number) =>// key应该在数组的上下文中被指定<ListItem key={number.toString()}value={number} />);return (<ul>{listItems}</ul>);
}
key 的唯一性
数组元素中使用的 key 在其兄弟之间应该是独一无二的。然而，它们不需要是全局唯一的。当生成两个不同的数组时，可以使用相同的 key 键。如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div><script type="text/babel">
function Blog(props) {const titlebar = (<ul>{props.arr.map((item) =><li key={item.id}>{item.title}</li>)}</ul>);const contentbar = props.arr.map((item) =><div key={item.id}><h1>{item.title}</h1><p>{item.content}</p></div>);return (<div>{titlebar}<hr />{contentbar}</div>);
}const posts = [{id: 1, title: 'title 1', content: 'This is title 1!'},{id: 2, title: 'title 2', content: 'This is title 2!'}
];
ReactDOM.render(<Blog arr={posts} />,document.getElementById('example')
);
</script></body>
</html>
页面效果：
key 会作为给 React 的提示，但不会传递给组件。如果组件中需要使用和 key 相同的值，需要将其作为属性传递。如下：
const contentbar = arr.map((item) =><Post key={item.id} id={item.id}/>)
Post 组件可以读出 props.id，但是不能读出 props.key。
在 jsx 中嵌入 map()
JSX 允许在大括号中嵌入任何表达式，可以在里面嵌入 map() ：
function NumberList(props) {const numbers = props.numbers;return (<ul>{numbers.map((item) =><ListItem key={item.toString()}value={item} />)}</ul>);
}
不过，如果一个 map() 嵌套了太多层级时，就应该提取出组件。