這是一個可怕的問題，在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

&&

!!show && <ShowComp />

為什麼要使用兩個感嘆號將顯示轉換為布林值？這個我會在明天的文章中跟大家再分享一篇這個內容的文章。

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>
  )
}

本文就分享到這裡了，趕快上手試試吧！