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) => 
{number}
)

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

2. list

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

  const sideBy = items.map(item => 
    

      {item.id}
      --
      {item.title}
    
  )
  return (
    

      
{listItem}
      

      {sideBy}
    
  )
}
const items = [{id: "1", name: '张三', title: "zs"}, {id: "2", name: "李四", title: 'ls'}]
ReactDOM.render(
  ,
  document.getElementById('root')
)

3. 总结：

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

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

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

function NumberList (props) {
  return (
    

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