一、React條件渲染

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

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

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

• 適合邏輯較多的情況
  

方式二：三元運算符

• 適合邏輯比較簡單
  
  
  

方式三：與運算符&&

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

方式四：v-show的效果

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

二、React列表渲染

真實開發(fā)中我們會從服務(wù)器請求到大量的數(shù)據(jù)，數(shù)據(jù)會以列表的形式存儲：

• 比如歌曲、歌手、排行榜列表的數(shù)據(jù)；
• 比如商品、購物車、評論列表的數(shù)據(jù)；
• 比如好友消息、動態(tài)、聯(lián)系人列表的數(shù)據(jù)；

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

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

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

• 比如過濾掉一些內(nèi)容：filter函數(shù)
  

• 比如截取數(shù)組中的一部分內(nèi)容：slice函數(shù)
  

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。