一、React條件渲染

某些情況下，界面的內容會根據不同的情況顯示不同的內容，或者決定是否渲染某部分內容：

• 在vue中，我們會通過指令來控制：比如v-if、v-show；
• 在React中，所有的條件判斷都和普通的JavaScript代碼一致；

常見的條件渲染的方式有哪些呢？
方式一：條件判斷語句

• 適合邏輯較多的情況
  

方式二：三元運算符

• 適合邏輯比較簡單
  
  
  

方式三：與運算符&&

• 適合如果條件成立，渲染某一個組件；如果條件不成立，什么內容也不渲染；
  

方式四：v-show的效果

• 主要是控制display屬性是否為none
  

二、React列表渲染

真實開發中我們會從服務器請求到大量的數據，數據會以列表的形式存儲：

• 比如歌曲、歌手、排行榜列表的數據；
• 比如商品、購物車、評論列表的數據；
• 比如好友消息、動態、聯系人列表的數據；

在React中并沒有像Vue模塊語法中的v-for指令，而且需要我們通過JavaScript代碼的方式組織數據，轉成JSX：

• 很多從Vue轉型到React的同學非常不習慣，認為Vue的方式更加的簡潔明了；
• 但是React中的JSX正是因為和JavaScript無縫的銜接，讓它可以更加的靈活；
• 另外我經常會提到React是真正可以提高我們編寫代碼能力的一種方式；

如何展示列表呢？
在React中，展示列表最多的方式就是使用數組的map高階函數；
很多時候我們在展示一個數組中的數據之前，需要先對它進行一些處理：

• 比如過濾掉一些內容：filter函數
  

• 比如截取數組中的一部分內容：slice函數
  

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的React条件渲染列表渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。