条件和列表渲染

1. 条件渲染

1. 使用if-else来控制渲染逻辑：

function App() {
  const count = 2
  let content
  if (count == 1) {
    content = <>hi react</>
  } else {
    content = <>hello javascript</>
  }
  return (
    <>
      <h1>{content}</h1>
    </>
  )
}
export default App

2. 使用三元运算符进行条件渲染：

function App() {
  const count = 2
  return (
    <>
      <h1>{count==2 ? <>hi react</> : <>hello javascript</>}</h1>
    </>
  )
}
export default App

3. 使用&&、||短路运算，比较适合用于一个条件的渲染，没有else的情况：

function App() {
  const count = 2
  return (
    <>
      {/*如果表达式条件满足执行后面的，不满足直接渲染表达式的值*/}
      <h1>{count==2 && <>hi react</>}</h1>
    </>
  )
}
export default App

提示

1. 哪些值不会渲染：布尔值,空字符,null,undefined,对象,函数
2. 如何对不渲染的值进行输出：JSON.stringfy(), {undefined + ''}

function App() {
  const count = 2
  const user = { name: 'jack' }
  return (
    <>
      {/*如果表达式条件满足执行后面的，不满足直接渲染表达式的值*/}
      <h1>{count == 2 && <>hi react</>}</h1>
      {/*直接报错*/}
      {/*<h1>{function(){}}</h1>*/}
      {/*如果使用对象拼接空字符串，会显示[object Object], <h1>{user+""}</h1>*/}
      <h1>{JSON.stringify(user)}</h1>
    </>
  )
}
export default App

2. 列表渲染

对数据集合进行批量渲染，常见的可以使用for，while, 如果是数组，react会自动将其展开进行join操作:

function App() {
  const arrayData = ['aa', 'bb', 'cc']
  let result = []
  // 使用循环
  for (let i = 0; i < arrayData.length; i++) {
    result[i] = <li>{arrayData[i]}</li>
  }
  return (
    <>
      {/*react默认会将数组进行join()操作*/}
      <h1>{arrayData}</h1>
      <ul>
        {result}
      </ul>
      <hr/>
      <ul>
        {/*使用map*/}
        {arrayData.map((item, i) => <li key={i}>{item}</li>)}
      </ul>
    </>
  )
}
export default App

运行效果：
其中map中使用key属性可以标记每个组件对应数组的元素，从而react能够正确的更新DOM树。