第5天 抽空看了一下 React 列表和鍵（keys）

• 在 React 中，轉(zhuǎn)換數(shù)組為元素列表的方式 ？
  答：

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

多組件渲染，可以創(chuàng)建元素集合，并用一對大括號 {} 在 JSX 中直接將其引用即可。

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

• 當創(chuàng)建元素列表時，“key” 是一個你需要包含的特殊字符串屬性。
  鍵(Keys) 幫助 React 標識哪個項被修改、添加或者移除了。數(shù)組中的每一個元素都應該有一個唯一不變的鍵(Keys)來標識。挑選 key 最好的方式是使用一個在它的同輩元素中不重復的標識字符串。

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

如果列表項的順序可能改變，我們不建議使用索引作為 keys。這可能會對性能產(chǎn)生負面影響，并可能導致組件狀態(tài)問題。

• 在數(shù)組中使用的 keys 必須在它們的同輩之間唯一。然而它們并不需要全局唯一。我們可以在操作兩個不同數(shù)組的時候使用相同的 keys ：

• 鍵是React的一個內(nèi)部映射，但其不會傳遞給組件的內(nèi)部。如果你需要在組件中使用相同的值，可以明確使用一個不同名字的 prop 傳入。

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

上面的例子中， Post 組件可以讀取 props.id，但是不能讀取 props.key 。

• 在 JSX 中嵌入 map() ?
  答：

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />

      )}
    </ul>
  );
}