react列表和keys

列表和keys

• 基础的列表组件

生成一个listItems数组，组件返回ul列表,渲染页面

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

Keys

• 数组中的每一项都要有固定的key，以便React区分哪些元素变化(增加/修改/移除).
• 它只是作为React自己识别，并不会传递到组件上
• 同一个数组中不能有同样的key

const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) =>  <li key={number.toString()}>    {number}  </li>);

没有固定ID的时候也可以用当前项的index代替，但是不建议这样做，因为会拖慢速度

const todoItems = todos.map((todo, index) =>  // Only do this if items have no stable IDs  <li key={index}>    {todo.text}  </li>);

点击这里了解keys的重要性

• 提升带有key的组件

Key只有在数组中才有意义，想要提升ListItem为一个组件是，需要把key留在数组中的<LitsItem />，而不是<li>上

//错误示例function ListItem(props) {  const value = props.value;  return (    // Wrong! There is no need to specify the key here:    <li key={value.toString()}>      {value}    </li>  );}function NumberList(props) {  const numbers = props.numbers;  const listItems = numbers.map((number) =>    // Wrong! The key should have been specified here:    <ListItem value={number} />  );  return (    <ul>      {listItems}    </ul>  );}const numbers = [1, 2, 3, 4, 5];ReactDOM.render(  <NumberList numbers={numbers} />,  document.getElementById('root'));

//正确示例function ListItem(props) {  // Correct! There is no need to specify the key here:  return <li>{props.value}</li>;}function NumberList(props) {  const numbers = props.numbers;  const listItems = numbers.map((number) =>    // Correct! Key should be specified inside the array.    <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'));