React升职记 ----- 列表 && key

react列表循环在{}里面使用ES6新语法map()

1.把map()提取出来的

function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li>{number}</li> ); return ( <ul>{listItems}</ul> ); }

2.没有把map()提取出来的，map()嵌套层次多最好提取出来

const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') ); function NumberList(props) { const numbers = props.numbers; return ( <ul> {numbers.map((number) => <ListItem key={number.toString()} value={number} /> )} </ul> ); }

需要像vue中v-for的使用方式类同，给每一项加上一个唯一标识，即key。 如果列表项目的顺序可能会变化，我们不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。

const todoItems = todos.map((todo) => <li key={todo.id}> {todo.text} </li> );

元素的 key 只有放在就近的数组上下文中才有意义。

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') );