建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
這是一個(gè)可怕的問(wèn)題，在 React 中，我們經(jīng)常會(huì)編寫(xiě)條件語(yǔ)句來(lái)顯示不同的視圖，比如這個(gè)簡(jiǎn)單的例子。
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、重慶小程序開(kāi)發(fā)公司、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了城關(guān)免費(fèi)建站歡迎大家使用！
const App = () => {
return (
<>
{
loading ?
}
)
}
但是，當(dāng)項(xiàng)目的代碼量足夠大并且有很多 JSX 條件時(shí)，事情很快就會(huì)失控。 代碼變得非常混亂且可讀性差。
像下面這段代碼，我真的沒(méi)有勇氣和信心去了解它的細(xì)節(jié)。
import React, { useState } from "react"
export default function ConditionDemo() {
const [ loading ] = useState(false)
const [ isLogin ] = useState(true)
const [ hasAuth ] = useState(false)
return (
<>
{
loading ?
loading
:
{
isLogin ?
(
hasAuth ?
has-permission
:
You have no permission to operate
) :
Please login first
}
}
)
}那么，在 React 中，我們可以通過(guò)哪些方式編寫(xiě)更具可讀性和可維護(hù)性的代碼呢？
1.使用三元運(yùn)算符
三元運(yùn)算符更適合需要少量條件判斷的場(chǎng)景。
如果條件分支很多，就會(huì)發(fā)生上面例子的災(zāi)難。
例如，要在移動(dòng)設(shè)備上顯示一個(gè) Mobile 組件，而在其他屏幕上顯示另一個(gè)組件，可以使用三元表達(dá)式來(lái)實(shí)現(xiàn)：
export default function AppTernaryExpressions() {
const isMobilePhone = true
return (
<>
{ isMobilePhone ?
)
}
2.使用“&&”簡(jiǎn)化三元運(yùn)算符
有時(shí)我們可以使用“&&”來(lái)簡(jiǎn)化三元表達(dá)式，比如下面的代碼。
show ?: null
&&
!!show &&
為什么要使用兩個(gè)感嘆號(hào)將顯示轉(zhuǎn)換為布爾值？這個(gè)我會(huì)在明天的文章中跟大家再分享一篇這個(gè)內(nèi)容的文章。
3.使用“if”語(yǔ)句
如果有數(shù)據(jù)，則顯示 List 組件。 如果沒(méi)有數(shù)據(jù)，則不顯示任何內(nèi)容。 使用 if 語(yǔ)句也是一個(gè)不錯(cuò)的選擇。
export default function AppIf() {
const { list } = useList()
if (!list) {
return null
}
return (
)
}當(dāng)然，發(fā)送請(qǐng)求并不總是成功，也可能失敗。 我們可以添加一些 if 分支來(lái)控制不同的邏輯。
export default function AppIf() {
const { isLoading, isError, list } = useList()
if (isLoading) {
return Loading...
}
if (isError) {
return Error...
}
return
}
4.使用“switch”
過(guò)多的 if 語(yǔ)句會(huì)導(dǎo)致組件混亂，因此，我們可以將多個(gè)條件提取到包含 switch 語(yǔ)句的單獨(dú)組件中。
讓我們看一個(gè)簡(jiǎn)單的菜單切換組件：
const MenuItem({ menu }) => {
switch (menu) {
case 1:
return
case 2:
return
case 3:
return
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 (
<>
)
}可以看到，使用‘switch’可以很方便的表達(dá)‘menu’和組件的對(duì)應(yīng)關(guān)系。
5.使用枚舉
如果我們需要根據(jù)用戶的不同狀態(tài)顯示Foo、Bar、Default三個(gè)組件，枚舉會(huì)比if語(yǔ)句更優(yōu)雅。
const Foo = () => {
return foo
}
const Bar = () => {
return bar
}
const Default = () => {
return default
}
const statusMap = {
foo:
bar:
default:
}
const App = () => {
const [status] = useState('default')
return (
statusMap[status]
)
}
6. 使用 JSX 控制語(yǔ)句
JSX 控制語(yǔ)句庫(kù)擴(kuò)展了 JSX 的功能，讓你可以直接使用 JSX 實(shí)現(xiàn)條件渲染。
讓我們舉個(gè)例子。
export default function App(props) {
const [ hasLogin ] = useState(false)
//...
return (
)
}
最后總結(jié)
以上就是我今天跟你分享的6個(gè)小技巧，如果你覺(jué)得有用的話，請(qǐng)記得點(diǎn)贊我，關(guān)注我，并將這篇文章分享給你的朋友，也許能夠幫助到他。
標(biāo)題名稱(chēng)：六個(gè)在React中使用的小技巧
網(wǎng)站網(wǎng)址：http://m.5511xx.com/article/codgpjp.html
