1.列表渲染

.map遍歷陣列。index標記元素(更新、刪除和修改的時候方便快速找到對應元素-更詳細解釋請看官網)；

注意點：

• key只能用在上下文為array的情況。比如我們在遍歷一個元件時，key只能放在迴圈陣列時呼叫的元件上，而不能用在元件裡面（請看官網）

• 在遍歷同一陣列時，不同陣列項的key必須不一樣；不同陣列的陣列之間項沒有這樣的要求

  render() {
    // key的作用是用於標記元素
    const numbers = [1, 2, 3, 4, 5];
    const listItems = numbers.map((number, key) =>
     <li key={key}>{number}</li>
     )
  ​
    return (
     <ul>{listItems}</ul>
     )
    }
   
  

2.條件渲染

1. 通過執行條件函式獲取返回值的形式實現條件渲染

   注意一點：狀態發生改變後，會觸發Getter方法

   ...
   render () {
     // 通過執行條件函式獲取返回值的形式實現條件渲染
     // 改變狀態也會觸發Greeting函式重新執行：原理
     function Greeting() {
      console.log(123)
      const isLoggedIn = this.state.isLoggedIn
      if (isLoggedIn) {
       return <div>歡迎光臨</div>;
       }
      return <div>請登入</div>;
      }
     
     function triggerLogin () {
      this.setState({
       isLoggedIn: !this.state.isLoggedIn
       })
      }
   ​
     return (
      <div>
        {Greeting.call(this)}
       <button onClick={triggerLogin.bind(this)}>改變狀態</button>
      </div>
      )
     }
   ...
    
   

2. 模板內通過： 條件 && 表示式的形式

3. 模板內通過： 條件 ？ 表示式1 ： 表示式2

4. 模板返回null的情況

   一個元件如果返回值為null，相當於清空元件中的所有元素，但是這個元件還在。相當於更新當前元件