7.2 列表渲染和Key · React教程

## 一、列表组件 ### 1.1 多组件渲染 > 在React中，转换数组为元素列表的方式，参考arr.map() ``` const listData = [ {"category": "Sporting Goods", "price": "$49.99", "stocked": true, "name": "Football"}, {"category": "Sporting Goods", "price": "$9.99", "stocked": true, "name": "Baseball"}, {"category": "Sporting Goods", "price": "$29.99", "stocked": false, "name": "Basketball"}, {"category": "Electronics", "price": "$99.99", "stocked": true, "name": "iPod Touch"}, {"category": "Electronics", "price": "$399.99", "stocked": false,"name": "iPhone 5"}, {"category": "Electronics", "price": "$199.99","stocked": true, "name": "Nexus 7"} ] const ListTpl = listData.map((data) => { return <li key={data.price}>{data.category}{data.price}{data.name}</li> }) class List extends Component{ render() { return (<ul>{ListTpl}</ul>) } } export default List; ``` - 如上，多元素集合需要用 **{}** 包裹并在JSX 中直接引用 ### 1.2 基本列表组件 > 针对1.1 中的示例，可以将列表的渲染封装为一个完整的组件，通过传入数据来渲染 ``` const listData = [ {"category": "Sporting Goods", "price": "$49.99", "stocked": true, "name": "Football"}, {"category": "Sporting Goods", "price": "$9.99", "stocked": true, "name": "Baseball"}, {"category": "Sporting Goods", "price": "$29.99", "stocked": false, "name": "Basketball"}, {"category": "Electronics", "price": "$99.99", "stocked": true, "name": "iPod Touch"}, {"category": "Electronics", "price": "$399.99", "stocked": false,"name": "iPhone 5"}, {"category": "Electronics", "price": "$199.99","stocked": true, "name": "Nexus 7"} ] // 封装的组件 function ListUl(props) { const ListTpl = props.data.map((data) => { return <li key={data.price}>{data.category}{data.price}{data.name}</li> }) return (<ul>{ListTpl}</ul>) } // 引用组件 class List extends Component{ render() { return <ListUl data={listData}/> } } export default List; ``` ## 二、键（Keys） > 键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识 - 挑选 key 最好的方式是使用一个在它的同辈元素中不重复的标识字符串。多数情况你可以使用数据中的 IDs 作为 keys ``` const todoItems = todos.map((todo) => <li key={todo.id}> {todo.text} </li> ); ``` - 当要渲染的列表项中没有稳定的 IDs 时，你可以使用数据项的索引值作为 key 的最后选择 (如果列表项可能被重新排序时，我们不建议使用索引作为 keys，因为这导致一定的性能问题，会很慢。) ``` const todoItems = todos.map((todo, index) => // Only do this if items have no stable IDs <li key={index}> {todo.text} </li> ); ``` - 在元素中，调用map()需要keys ``` 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> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') ); ``` - keys在同辈元素中必须是唯一的 ## 2.1 在JSX中嵌入map() > 在之前的示例中，都是通过单独提出map（）再通过{}将遍历的结果放在JSX中，其实它还可以像以下这样： ``` const listData = [ {"category": "Sporting Goods", "price": "$49.99", "stocked": true, "name": "Football"}, {"category": "Sporting Goods", "price": "$9.99", "stocked": true, "name": "Baseball"}, {"category": "Sporting Goods", "price": "$29.99", "stocked": false, "name": "Basketball"}, {"category": "Electronics", "price": "$99.99", "stocked": true, "name": "iPod Touch"}, {"category": "Electronics", "price": "$399.99", "stocked": false,"name": "iPhone 5"}, {"category": "Electronics", "price": "$199.99","stocked": true, "name": "Nexus 7"} ] class List extends Component{ render() { return (<ul>{ listData.map((data, index) => <li key={index}>{data.name}</li>) }</ul>) } } ```