React 學習之路（七）列表渲染 && keys

時間 2019-12-04

標籤 react 學習之路列表渲染 keys 欄目 React 简体版

原文原文鏈接

列表渲染 && keys

map()css

map函數會對數組的每個元素進行處理，而後返回一個新的數組

const num = [1, 2, 4, 5];
const num1 = num.map((number) => {
  return number * 2;
})

console.log(num1); // [2, 4, 8, 10]
console.log(num); //  [1, 2, 4, 5]

渲染多個組件html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="../react/react.js"></script>
  <script src="../react/react-dom.js"></script>
  <script src="https://cdn.bootcss.com/babel-core/5.8.35/browser.js"></script>
  <script type="text/babel">
   
  const numbers = [1, 2, 3, 4, 5];
  const listItems = numbers.map((number) =>{
    return <li>{number}</li>
  });

  ReactDOM.render(
    <ul>{listItems}</ul>,
    document.getElementById('app')
  );
  </script>
</body>
</html>

基礎組件列表react

咱們能夠把前面的例子重構成一個組件。這個組件接收numbers數組做爲參數，輸出一個無序列表。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="../react/react.js"></script>
  <script src="../react/react-dom.js"></script>
  <script src="https://cdn.bootcss.com/babel-core/5.8.35/browser.js"></script>
  <script type="text/babel">
   
   function NumberList(props) {
    const numbers = props.numbers;
    // 【*】 若是不加key，將會有一個警告 a key should be provided for list items ,意思是當你建立一個元素時，必須包括一個特殊的 key 屬性。
    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('app')
  );
  </script>
</body>
</html>

keys數組

Keys 能夠在DOM中的某些元素被增長或刪除的時候幫助 React 識別哪些元素髮生了變化。所以你應當給數組中的每個元素賦予一個肯定的標識。一個元素的key最好是這個元素在列表中擁有的一個獨一無二的字符串。一般，咱們使用來自數據的id做爲元素的key:

當元素沒有肯定的id時，你能夠使用他的序列號索引index做爲key

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

用keys提取組件babel

比方說，若是你提取出一個ListItem組件，你應該把key保存在數組中的這個<ListItem />元素上，而不是放在ListItem組件中的<li>元素上。

// 錯誤的示範
function ListItem(props) {
  const value = props.value;
  return (
    // 錯啦！你不須要在這裏指定key:
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    //錯啦！元素的key應該在這裏指定：
    <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) {
  // 對啦！這裏不須要指定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')
);

元素的key在他的兄弟元素之間應該惟一app