小说阅读网站,盗墓笔记小说,女人书籍排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

六個在React中使用的小技巧

這是一個可怕的問題，在 React 中，我們經(jīng)常會編寫條件語句來顯示不同的視圖，比如這個簡單的例子。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、重慶小程序開發(fā)公司、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了城關(guān)免費建站歡迎大家使用！

const App = () => {
  return (
    <>
      {
        loading ?  : 
      }
    
  )
}

但是，當項目的代碼量足夠大并且有很多 JSX 條件時，事情很快就會失控。代碼變得非?；靵y且可讀性差。

像下面這段代碼，我真的沒有勇氣和信心去了解它的細節(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 中，我們可以通過哪些方式編寫更具可讀性和可維護性的代碼呢？

1.使用三元運算符

三元運算符更適合需要少量條件判斷的場景。

如果條件分支很多，就會發(fā)生上面例子的災難。

例如，要在移動設(shè)備上顯示一個 Mobile 組件，而在其他屏幕上顯示另一個組件，可以使用三元表達式來實現(xiàn)：

export default function AppTernaryExpressions() {
  const isMobilePhone = true
  return (
    <>
      { isMobilePhone ?  :  }
    
  )
}

2.使用“&&”簡化三元運算符

有時我們可以使用“&&”來簡化三元表達式，比如下面的代碼。

show ?  : null

!!show &&

為什么要使用兩個感嘆號將顯示轉(zhuǎn)換為布爾值？這個我會在明天的文章中跟大家再分享一篇這個內(nèi)容的文章。

3.使用“if”語句

如果有數(shù)據(jù)，則顯示 List 組件。如果沒有數(shù)據(jù)，則不顯示任何內(nèi)容。使用 if 語句也是一個不錯的選擇。

export default function AppIf() {
  const { list } = useList()

  if (!list) {
    return null
  }

  return (
    
  )
}

當然，發(fā)送請求并不總是成功，也可能失敗。我們可以添加一些 if 分支來控制不同的邏輯。

export default function AppIf() {
  const { isLoading, isError, list } = useList()

  if (isLoading) {
    return Loading...

  }

  if (isError) {
    return Error...

  }

  return 
}

4.使用“switch”

過多的 if 語句會導致組件混亂，因此，我們可以將多個條件提取到包含 switch 語句的單獨組件中。

讓我們看一個簡單的菜單切換組件：

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’可以很方便的表達‘menu’和組件的對應關(guān)系。

5.使用枚舉

如果我們需要根據(jù)用戶的不同狀態(tài)顯示Foo、Bar、Default三個組件，枚舉會比if語句更優(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 控制語句

JSX 控制語句庫擴展了 JSX 的功能，讓你可以直接使用 JSX 實現(xiàn)條件渲染。

讓我們舉個例子。

export default function App(props) {
  const [ hasLogin ] = useState(false)
  //...
  return (
    
      
        
      
      
        
      
    
  )
}

最后總結(jié)

以上就是我今天跟你分享的6個小技巧，如果你覺得有用的話，請記得點贊我，關(guān)注我，并將這篇文章分享給你的朋友，也許能夠幫助到他。

網(wǎng)頁題目：六個在React中使用的小技巧
標題URL：http://m.fisionsoft.com.cn/article/codgpjp.html