8. react - 列表渲染 （for 循环）

1. 普通列表渲染  [1,2,3,4,5]

　　

function NumberList (props) {
  const numbers = props.numbers
  // key 必须有，否则产生警告。key 一般用id,提高渲染效率。万不得已使用 index
  const listItem = numbers.map((number) => <li key={number.toString()}>{number}</li>)

  return (
    <ul>{listItem}</ul>
  )
}
const numbers = [1,2,3,4,5]
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
)

2. list<map> 渲染 [{},{},{}]

function ListItems (props) {
  const items = props.items
　　// 只需要保证同一次遍历中 key 不同。 listItems 和 sideBy 属于不同的遍历，可以用相同的key
  const listItem = items.map(item => <li key={item.id}>{item.name}</li>)

  const sideBy = items.map(item => 
    <div key={item.id}>
      <span>{item.id}</span>
      --
      <span>{item.title}</span>
    </div>
  )
  return (
    <div>
      <ul>{listItem}</ul>
      <hr />
      {sideBy}
    </div>
  )
}
const items = [{id: "1", name: '张三', title: "zs"}, {id: "2", name: "李四", title: 'ls'}]
ReactDOM.render(
  <ListItems items={items} />,
  document.getElementById('root')
)

3. 总结：

　　1. react 的循环渲染是利用 数组的遍历 api (map)  返回一个react dom 的集合，插入到 jsx 中

　　2. 遍历时必须有唯一索引 key 提高遍历的效率。万不得已可以使用 index

　　3. jsx 语法中可以直接嵌套遍历

function NumberList (props) {
  return (
    <ul>
      {props.numbers.map(num => <li>{num}</li>)}   // jsx 中嵌套遍历
    </ul>
  )
}
let numbers = [1,2,3,4,5,6]
ReactDOM.render(
  <NumberList numbers={numbers}></NumberList>,
  document.getElementById('root')
)