這是一個可怕的問題，在 React 中，我們經常會編寫條件語句來顯示不同的視圖，比如這個簡單的例子。
const App = () => {
return (
<>
{
loading ? <Loading /> : <List>
}
</>
)
}但是，當項目的代碼量足夠大并且有很多 JSX 條件時，事情很快就會失控。 代碼變得非常混亂且可讀性差。
像下面這段代碼，我真的沒有勇氣和信心去了解它的細節。
import React, { useState } from "react"
export default function ConditionDemo() {
const [ loading ] = useState(false)
const [ isLogin ] = useState(true)
const [ hasAuth ] = useState(false)
return (
<>
{
loading ?
<div className="loading">
loading
</div> :
<div className="content">
{
isLogin ?
(
hasAuth ?
<div className="has-permission">
has-permission
</div> :
<div className="no-permission">You have no permission to operate</div>
) :
<div className="go-login">Please login first</div>
}
</div>
}
</>
)
}那么，在 React 中，我們可以通過哪些方式編寫更具可讀性和可維護性的代碼呢？
1.使用三元運算符
三元運算符更適合需要少量條件判斷的場景。
如果條件分支很多，就會發生上面例子的災難。
例如，要在移動設備上顯示一個 Mobile 組件，而在其他屏幕上顯示另一個組件，可以使用三元表達式來實現：
export default function AppTernaryExpressions() {
const isMobilePhone = true
return (
<>
{ isMobilePhone ? <MobileComp /> : <PcComp /> }
</>
)
}2.使用“&&”簡化三元運算符
有時我們可以使用“&&”來簡化三元表達式，比如下面的代碼。
show ? <ShowComp /> : null
&&
為什么要使用兩個感嘆號將顯示轉換為布爾值？這個我會在明天的文章中跟大家再分享一篇這個內容的文章。
3.使用“if”語句
如果有數據，則顯示 List 組件。 如果沒有數據，則不顯示任何內容。 使用 if 語句也是一個不錯的選擇。
export default function AppIf() {
const { list } = useList()
if (!list) {
return null
}
return (
<List list={list} />
)
}當然，發送請求并不總是成功，也可能失敗。 我們可以添加一些 if 分支來控制不同的邏輯。
export default function AppIf() {
const { isLoading, isError, list } = useList()
if (isLoading) {
return <div>Loading...</div>
}
if (isError) {
return <div>Error...</div>
}
return <List list={list} />
}4.使用“switch”
過多的 if 語句會導致組件混亂，因此，我們可以將多個條件提取到包含 switch 語句的單獨組件中。
讓我們看一個簡單的菜單切換組件：
const MenuItem({ menu }) => {
switch (menu) {
case 1:
return <Users />
case 2:
return <Chats />
case 3:
return <Rooms />
default:
return null
}
}
export default function Menu() {
const [menu, setMenu] = React.useState(1)
const toggleMenu = () => {
setMenu((m) => {
if (m === 3) return 1
return m + 1
})
}
return (
<>
<MenuItem menu={ menu } />
<button onClick={ toggleMenu }>toggle menu</button>
</>
)
}可以看到，使用‘switch’可以很方便的表達‘menu’和組件的對應關系。
5.使用枚舉
如果我們需要根據用戶的不同狀態顯示Foo、Bar、Default三個組件，枚舉會比if語句更優雅。
const Foo = () => {
return <div>foo</div>
}
const Bar = () => {
return <div>bar</div>
}
const Default = () => {
return <div>default</div>
}
const statusMap = {
foo: <Foo />,
bar: <Bar />,
default: <Default />
}
const App = () => {
const [status] = useState('default')
return (
statusMap[status]
)
}6. 使用 JSX 控制語句
JSX 控制語句庫擴展了 JSX 的功能，讓你可以直接使用 JSX 實現條件渲染。
讓我們舉個例子。
export default function App(props) {
const [ hasLogin ] = useState(false)
//...
return (
<Choose>
<When condition={ hasLogin }>
<button>Logout</button>
</When>
<When condition={ !hasLogin }>
<button>Login</button>
</When>
</Choose>
)
}最后總結
以上就是我今天跟你分享的6個小技巧，如果你覺得有用的話，請記得點贊我，關注我，并將這篇文章分享給你的朋友，也許能夠幫助到他。
