Re: 新手让网页 act 起来: Day08 - 简单却不是很容易懂的 key （1）

key 是 React element 中的一个属性，相信很多人在撰写 React 的时候都会遇到下面的错误讯息

究竟为什麽会有这个错误讯息呢？就让我们来一起来了解 key 的基本概念吧！

Render list

如果还有印象，在前面介绍 React.createElement 的时候，当我们的 children 是一个阵列的时候就会显示，要求要有 key 的错误讯息。
所以我们可以这样子做：

<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
  <div id='root'></div>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>

  <script type='text/babel'>
    const colors = [
      'red',
      'yellow',
      'orange',
      'blue'
    ]

    const element = (
      <ul>
        {colors.map(color => {
          return (
            <li>
              {color}
            </li>
          )
        })}
      </ul>
    )

    ReactDOM.render(element, document.getElementById('root'))
  </script>
</body>

</html>

这个时候画面就会顺利出现 list， console 也会如预期的出现需要 key 的错误讯息

那要怎麽样才能摆脱这个错误讯息呢？其实非常简单，我们只要在每个 list 加上 key 的属性，值可以是字串或是数字但必须是唯一的。

这个时候相信不少人会想到用阵列的 index 来当作 key，以上面的例子来看不会有太大的问题，因为我们只是要单纯 render list，但在会做阵列新增修改的情况下，就不推荐用 index 作为 key，因为这样效能上会比较不好。

这边假设每个 color 的值不会有重复的情况下，可以作为 key

const element = (
  <ul>
    {colors.map(color => {
      return (
        <li key={color}>
          {color}
        </li> 
      )
    })}
  </ul>
)

加上去之後，console 的错误讯息就消失啦。

最後我们来补充一下，除了必须是唯一的以外，使用 key 要注意的地方。

key 只需要是 list 中唯一的值，不需要是整个 App

const element = (
  <ul>
    {colors.map(color => {
      return (
        <li key={color}>
          {color}
        </li> 
      )
    })}
    
    {colors.map(color => {
      return (
        <li key={color}>
          {color}
        </li> 
      )
    })}
  </ul>
)

只要在两个独立的阵列中是唯一的值，就可以合法的 render 出画面。

key 必须加在 list element 中的最外层

const element = (
  <ul>
    {colors.map(color => {
      return (
        <li>
          <span key={color}>{color}</span>
        </li> 
      )
    })}
  </ul>
)

这样写就会发现 console 又会跑出错误讯息，应改要把 key 挂在最外层的 li 上。

key 不会出现在 props 中

function Items(props) {
  console.log(props.key) // undefined

  return <li>{props.value}</li>
}

const colors = [
  'red',
  'yellow',
  'orange',
  'blue'
]

const element = (
  <ul>
    {colors.map(color => {
      return (
        <Items key={color} value={color} />
      )
    })}
  </ul>
)