列表渲染&key

在 vue 里我们用 v-for 指令完成一个列表的渲染，在 react 里我们使用 map 方法自己实现。

var list = [1, 2, 3];

return (
  <div>
    {list.map((item, index) => {
      return <p key={index}>{item}</p>;
    })}
  </div>
);

上面的代码，js 语法在 dom 中必须用表达式包裹。被遍历渲染出来的兄弟节点上必须加 key 标记用于区分，这是底层 diff 算法要求的，且要保证 key 值的唯一性。【key 不可以用时间戳来赋值】

遍历对象

var obj = { 1:1, 2:2 }

render() {
  return <div>
    {
      (Object.values(obj)).map((item, index) => {
        return <p key={ index }> { item } </p>
      })
    }
  </div>
}