資訊專欄INFORMATION COLUMN
摘要：對于一個展示頁面來講通常有好幾種展示狀態以列表頁為例數據為空空頁面取數據時發生錯誤錯誤頁面數據正常加載狀態針對以上三種情況渲染列表的時候要正確判斷并渲染出相應的視圖也就是條件渲染不同于的等框架提供的的條件渲染都是原生的再加上一點點的比如
對于一個展示頁面來講, 通常有好幾種展示狀態(以列表頁為例):
數據為空, 空頁面
取數據時發生錯誤, 錯誤頁面
數據正常
加載狀態
針對以上三種情況, react渲染列表的時候要正確判斷并渲染出相應的視圖, 也就是條件渲染. 不同于vue的v-if, v-show等框架提供的api, react的條件渲染都是js原生的再加上一點點的hack. 比如react文檔提到的. if/else, && 和三目等等.
當然上面的都是常用的一些方法, 但是也存在著各種問題, 比如條件分支過多的的事時候代碼也會越來越亂. 下面提供幾種具有普適性的方法
if/else, 三目以及 短路運算符這三個方法都是官方文檔提到的, 這里就放到一起了, 其實這三種方案都是類似的: 在render生命周期里做相應的判斷. 不過三目和短路運算符可以在jsx行內使用.
if/elseclass List extends Component {
static propTypes = {
status: PropTypes.oneOf(["loading", "error", "success", "empty"])
}
render () {
const { status } = this.props
if (status === "loading") {
return
加載狀態
}
if (status === "error") {
return
錯誤狀態
}
if (status === "success") {
return
成功狀態
}
if (status === "empty") {
return
空狀態
}
}
}
可以看到這種寫法勝在清楚明了, 但是如果判斷分支越來越多代碼無可避免的會非常冗余, 同時復用性也堪憂.
Render(IF)組件這里的render當然不是生命周期里的render, 我們可以跟vue里的v-if對應起來
function Render ({ if: cond, children }) {
return cond ? children : null
}
上面是簡單的Render組件, 使用起來是這樣的
class List extends Component {
static propTypes = {
status: PropTypes.oneOf(["loading", "error", "success", "empty"])
}
render () {
const { status } = this.props
return (
加載狀態
錯誤狀態
成功狀態
空狀態
)
}
}
相比使用在render里使用大量的if/else 上面的寫法無疑更加清楚明了了. 如果所有列表業務組件統一起來, 狀態保持一致, 我們可以做更高層次的抽象, 把其他狀態都抽象到一個高階函數之中, 我們寫代碼的時候只要確保success的狀態能正確渲染即可
立即執行函數jsx里是可以寫變量, 同時立即執行函數也是可以的
class List extends Component {
static propTypes = {
status: PropTypes.oneOf(["loading", "error", "success", "empty"])
}
render () {
const { status } = this.props
return (
{(() => {
switch (status) {
case "loading":
return 加載狀態
case "error":
return 錯誤狀態
case "success":
return 成功狀態
case "empty":
return 空狀態
}
})()}
)
}
}
立即函數的復用顯然不太現實, 所以立即函數的適用場景是那種相對比較復雜但無法復用的組件
高階組件對于高階組件的概念就不做贅述了, 我們把條件渲染的邏輯放到高階組件中, 除了邏輯的抽象外, 也可以提高組件的復用率.
const withList = WrappedComponent => {
return class PP extends Component {
render() {
const { status } = this.props
switch (status) {
case "loading":
return 加載狀態
case "error":
return 錯誤狀態
case "success":
return
如果我們可以保證所有列表的props一致(也就是都使用status判斷狀態), 我們完全可以專注的寫status為success的狀態:
@withList
class List extends Component {
static propTypes = {
status: PropTypes.oneOf(["loading", "error", "success", "empty"])
}
render () {
return (
成功頁面
)
}
}
其次我們可以把加載, 錯誤, 以及空狀態統一抽成組件, 對于提高組件的復用率無疑可以起很大作用.
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98579.html
摘要：用這種方式創建組件時，并沒有對內部的函數，進行綁定，所以如果你想讓函數在回調中保持正確的，就要手動對需要的函數進行綁定，如上面的，在構造函數中對進行了綁定。 當我們談起React的時候，多半會將注意力集中在組件之上，思考如何將頁面劃分成一個個組件，以及如何編寫可復用的組件。但對于接觸React不久，還沒有真正用它做一個完整項目的人來說，理解如何創建一個組件也并不那么簡單。在最開始的時候...
摘要：本文給大家介紹的是相比于其他框架更靈活的配置方式，大家可以根據自己的項目需要選擇合適的方式。標簽的方式下面我們看一個例子當為時渲染我們可以看到這種路由配置方式使用標簽，然后根據找到對應的映射。 路由的概念 路由的作用就是將url和函數進行映射，在單頁面應用中路由是必不可少的部分，路由配置就是一組指令，用來告訴router如何匹配url，以及對應的函數映射，即執行對應的代碼。 react...
摘要：活動結束單文件組件使用構建工具創建項目，綜合來看單文件組件應該是最好的定義組件的方式，而且不會帶來額外的模版語法的學習成本。 前端組件化開發已經是一個老生常談的話題了，組件化讓我們的開發效率以及維護成本帶來了質的提升。 當然因為現在的系統越來越復雜龐大，所以開發與維護成本就變得必須要考慮的問題，因此滋生出了目前的三大前端框架 Vue、Angular、React。 那今天我們就來看看 V...
摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
閱讀 3617·2023-04-25 23:32
閱讀 2039·2019-08-30 15:55
閱讀 2651·2019-08-30 15:52
閱讀 3110·2019-08-30 10:54
閱讀 839·2019-08-29 16:16
閱讀 647·2019-08-29 15:09
閱讀 3647·2019-08-26 14:05
閱讀 1632·2019-08-26 13:22
