条件渲染与列表渲染

• 出于 jsx 对象可以是变量的特性，使用一些判断语句返回不同的 jsx 对象显得异常简单
• 与运算符 && 可以方便地渲染一个元素
• 使用三目运算符，也可以较为直观地输出不同元素

class Comp extends Component {
  render () {
    const jd1 =2

    let str1 = ''
    if (jd1 > 1) {                  // 使用条件判断
      str1 = <div>0. Big than 1</div>
    } else {
      str1 = <div>0. Less than 1</div>
    }

    return (
      <div className={'react-comp'}>
        {str1}
        {jd1 > 1 && <div>1. Big than 1</div>} {/*与运算符 && 使用*/}
        {jd1 > 1 ? <div>2. Big than 1</div> : <div>2. Less than 1</div>} {/*三目运算符*/}
      </div>
    )
  }
}

• React 中的列表渲染不同与 vue 的 v-for，主要是使用 Array.map() 实现(亦可以其他循环列表的方法)
• 与 Vue 一致的是，需要配置 key 属性值，帮助程序哪些元素发生变化，以此做出改变并渲染(提高性能)
• 在代码中，列表渲染时指定了 key 属性值，如果将 key 属性值进行传递是无法读取 props.key 的
• 这种情况一般推荐使用其他属性关键词代替，如 id, subKey 等自定义名称

class Comp2 extends Component {
  render () {
    const List = ['a', 'b', 'c', 'd']
    const eleLI = List.map((item, index) => {
      return <li key={index}>{item}</li>
      // 须要指定 key 属性值，一般指定为 item.id(或其他唯一的字符串或数字)如果没有 item.id 或其他
      // 则可指定 index 值（一般认为，index 性能过差，因为重新渲染时会重新刷新 list）
      // 详情： https://react.docschina.org/docs/reconciliation.html#%E9%80%92%E5%BD%92%E5%AD%90%E8%8A%82%E7%82%B9
    })

    return (
      <div className={'react-comp'}>
        <ul style={{display: 'inline-block'}}>
          {eleLI}
        </ul>
        <ul style={{display: 'inline-block'}}>
          {List.map((item) => {return <li key={item}>{item}</li>})} {/*这里展示了，Array.map 也可以直接在 jsx 中使用*/}
        </ul>
      </div>
    )
  }
}