6个在React中使用的小技巧

逃离我推掉我的手 2024-02-05 22:46 22阅读 0赞

这是一个可怕的问题，在 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>
      )
    }

### **更多精彩教程欢迎B站搜索“千锋教育”**  ###

千锋前端浠浠呀老师HTML+CSS教程，零基础web前端开发入门必看视频