【Day09】列表 List 与 key

简单的 React 列表范例

const uli = {
  <li>1</li>
  <li>2</li>
  <li>3</li>
}

return (<div>{ uli }</div>)

使用 map 涵式 Render 多个 Component

• 在 React 中，每个迭代的 element 最外层都必须加上 key 值，以识别哪个项目被修改、添加或转移了
• 如未加上 key 值，页面会报错或无法显示
• key 的值必须是同级（Sibling）能够识别的唯一值

return (
  <div>{
    array.map(item=>
	  <div key={ item.id }>
	     <h2>标题：{ item.title }</h2>
	     <p>{ item.content }</p>
	  </div>
	)

  }</div>)

使用 index 作为 key 值

当 render 的项目没有固定 ID 时，
可以使用项目的索引做为 key。

const todoItems = todos.map((todo, index) =>
  // 请在项目没有固定的 ID 时才这样做
  <li key={index}>
    {todo.text}
  </li>
);

• 只要有其他可辨识的唯一值，就尽量不要用 index 来当作 key 值
• 如果项目的顺序改变，使用 index 时 diff 会变慢，对效能产生不好的影响
• 使用 index 作为 key 值，也可能会让 component state 产生问题

component instance 是基於 key 来决定是否更新以及重复使用，如果 key 是一个索引值，那麽修改顺序时会修改目前的 key，导致 component 的 state（例如不受控制输入框）可能相互篡改导致无法预期的变动

参考资料

Keys | React 官方文件