条件渲染

使用if(){...}else{...}条件渲染,或者使用三元表达式渲染

TODO: isLoading 是 true，显示“加载中...”，否则显示“加载完毕！”

1. 使用if条件渲染,代码如下:

   import ReactDOM from 'react-dom'
   
   const isLoading = true
   
   const loadData = () => {
       if (isLoading) {
           return <h2>数据加载中，请稍后...</h2>
       }
       return <h2>数据加载完成，此处显示了加载后的数据</h2>
   }
   
   ReactDOM.render(loadData(), document.querySelector('#root'))

2. 使用三元表达式条件渲染,代码如下:

   const loadData = () => {
       return <h2>{isLoading ? '数据加载中，请稍后...' : '数据加载完成，此处显示了加载后的数据'}</h2>
   }

列表渲染

TODO:渲染一个ul列表

使用map()渲染列表代码如下:

// 引入react核心包
import React from 'react'
// 设计DOM来渲染的一个包
import ReactDom from 'react-dom'

const arr = [ { id: 1, name: 'vue' }, { id: 2, name: 'react' }, { id: 3, name: 'a' } ]

// 唯一的key用来做内部性能优化
const temp = arr.map((item) => <li key={item.id}> {item.name  }</li>)

const ele = <ul>{temp}</ul>

// 渲染谁，渲染到哪里
ReactDom.render(ele, document.querySelector('#root'))