溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
對于一個展示頁面來講, 通常有好幾種展示狀態(以列表頁為例):
針對以上三種情況, react渲染列表的時候要正確判斷并渲染出相應的視圖, 也就是條件渲染. 不同于vue的v-if, v-show等框架提供的api, react的條件渲染都是js原生的再加上一點點的hack. 比如react文檔提到的. if/else, && 和三目等等.
當然上面的都是常用的一些方法, 但是也存在著各種問題, 比如條件分支過多的的事時候代碼也會越來越亂. 下面提供幾種具有普適性的方法
if/else, 三目以及 短路運算符
這三個方法都是官方文檔提到的, 這里就放到一起了, 其實這三種方案都是類似的: 在render生命周期里做相應的判斷. 不過三目和短路運算符可以在jsx行內使用.
if/else
class List extends Component {
static propTypes = {
status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
}
render () {
const { status } = this.props
if (status === 'loading') {
return <div>
加載狀態
</div>
}
if (status === 'error') {
return <div>
錯誤狀態
</div>
}
if (status === 'success') {
return <div>
成功狀態
</div>
}
if (status === 'empty') {
return <div>
空狀態
</div>
}
}
}
可以看到這種寫法勝在清楚明了, 但是如果判斷分支越來越多代碼無可避免的會非常冗余, 同時復用性也堪憂.
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 (
<div>
<Render if={status === 'loading'} >
加載狀態
</Render>
<Render if={status === 'error'} >
錯誤狀態
</Render>
<Render if={status === 'success'} >
成功狀態
</Render>
<Render if={status === 'empty'} >
空狀態
</Render>
</div>
)
}
}
相比使用在render里使用大量的if/else 上面的寫法無疑更加清楚明了了. 如果所有列表業務組件統一起來, 狀態保持一致, 我們可以做更高層次的抽象, 把其他狀態都抽象到一個高階函數之中, 我們寫代碼的時候只要確保success的狀態能正確渲染即可
立即執行函數
jsx里是可以寫變量, 同時立即執行函數也是可以的
class List extends Component {
static propTypes = {
status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
}
render () {
const { status } = this.props
return (
<div>
{(() => {
switch (status) {
case 'loading':
return <div>加載狀態</div>
case 'error':
return <div>錯誤狀態</div>
case 'success':
return <div>成功狀態</div>
case 'empty':
return <div>空狀態</div>
}
})()}
</div>
)
}
}
立即函數的復用顯然不太現實, 所以立即函數的適用場景是那種相對比較復雜但無法復用的組件
高階組件
對于高階組件的概念就不做贅述了, 我們把條件渲染的邏輯放到高階組件中, 除了邏輯的抽象外, 也可以提高組件的復用率.
const withList = WrappedComponent => {
return class PP extends Component {
render() {
const { status } = this.props
switch (status) {
case 'loading':
return <div>加載狀態</div>
case 'error':
return <div>錯誤狀態</div>
case 'success':
return <WrappedComponent {...this.props}/>
case 'empty':
return <div>空狀態</div>
}
}
}
}
如果我們可以保證所有列表的props一致(也就是都使用status判斷狀態), 我們完全可以專注的寫status為success的狀態:
@withList
class List extends Component {
static propTypes = {
status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
}
render () {
return (
<div>
成功頁面
</div>
)
}
}
其次我們可以把加載, 錯誤, 以及空狀態統一抽成組件, 對于提高組件的復用率無疑可以起很大作用.
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
