列表与 Key ( Day 10 )

如果有使用过其他框架的经验，可能会需要熟悉一下React 的写法，是由 JSX 搭配回圈去产生。以下罗列一些需要注意的地方：

• 常见使用 map、filter 、reduce 等处理阵列法语处理列表
• 注意列表需要绑上一个 key 值，作为 React 在更新 React DOM tree 时的辨识，而 key 必须是唯一
• key 的绑定必须在阵列处理时被绑定 (下面提供反例)

1. 2. 一个简单的范例

资料如果有类似 id 的 key 最好，不然可考虑使用物件本身绑定。

const lists = [{
        id: 1,
        name: 'Apple'
    }, {
        id: 2,
        name: 'Banana'
    },
    {
        id: 3,
        name: 'Berry'
    }
]


function Vender(props) {
    const lists = props.lists;
    const listItems = lists.map((list) =>
        <li key = {list.id}>
          { list.name }
        </li>
    );
    return (
      <ul>
          { listItems }
      </ul>
    );
}

ReactDOM.render( <Vender lists = {lists}/>,
document.getElementById('root'));

另附上 Codepen

应该避免的错误(3. key 的绑定必须在阵列处理时被绑定)

const fruits = [
  {
    name: 'tomato',
    color: 'red',
    id: '#aaa'
  },
  //资料略
]

function ListItem(props) {
  // 在元件内才绑定，而非在处理阵列时
  return <li key={props.id}>{props.value}</li>;
}

function FruitsList(props) {
  const fruits = props.fruits;
  return (
    <ul>
      {fruits.map((fruit) =>
        //正确写法 <ListItem id={fruit.id} value={fruit.name} />
        <ListItem id={fruit.id} value={fruit.name} />
      )}
    </ul>
  );
}

ReactDOM.render(
  <FruitsList fruits={fruits} />,
  document.getElementById('root')
);

参考资料：
https://zh-hant.reactjs.org/docs/lists-and-keys.html