30DaysChallenge 是自主性每兩天寫一篇技術相關的部落格

React

Key

當我們把資料用 state 來管理後，很大筆的資料就會使用迴圈的方式渲染

最常使用的就是使用 Map

//想像的結構
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>...</div>

const data = [...]

const Component = () => {
 return data.map(e => return (<div>e</div>))
}

然後就會看到 console 一直跳出，「給我一個 KEY!!!」(欸不是

會跳出警告，跟你說這些迴圈出來的東西每個一個都需要獨立的 KEY

這樣之後渲染的時候，React 可以更快的去判斷哪個資料不見、哪個資料繼續存在

key 可以想像成 id，要獨一無二，通常抓過來的資料都會有獨特的值可以使用

const data = [...]

const Component = () => {
 return data.map(e => return (<div key={e.id}>e</div>))
}

–

Key 的位置

Key 的位置要擺放在源頭，也就是從哪裡使用就放在哪裡

拿官方的例子來說，來源

function ListItem(props) {
  const value = props.value;
  return (
    <li key={value.toString()}>
      {value}
    </li>
  );
}

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

可以看到，我們透過 NumberList 下使用 ListItem 來迴圈出資料，

所以 Key 應該要放在生產迴圈的地方，不用透過 props 傳到下面去，因為 React 看不懂 XD

---

08/25 React 好像很多小雜事