react.js windows 前端 6个在React中使用的小技巧

      }

  )

}

那么，在 React 中，我们可以通过哪些方式编写更具可读性和可维护性的代码呢？

1.使用三元运算符

三元运算符更适合需要少量条件判断的场景。

如果条件分支很多，就会发生上面例子的灾难。

例如，要在移动设备上显示一个 Mobile 组件，而在其他屏幕上显示另一个组件，可以使用三元表达式来实现：

export default function AppTernaryExpressions() {

  const isMobilePhone = true

  return (

    <>

      { isMobilePhone ?  :  }

  )

}

2.使用“&&”简化三元运算符

有时我们可以使用“&&”来简化三元表达式，比如下面的代码。

show ?  : null

&&

!!show && 

为什么要使用两个感叹号将显示转换为布尔值？这个我会在明天的文章中跟大家再分享一篇这个内容的文章。

3.使用“if”语句

如果有数据，则显示 List 组件。如果没有数据，则不显示任何内容。使用 if 语句也是一个不错的选择。

export default function AppIf() {

  const { list } = useList()

  if (!list) {

    return null

  }

  return (

  )

}

当然，发送请求并不总是成功，也可能失败。我们可以添加一些 if 分支来控制不同的逻辑。

export default function AppIf() {

  const { isLoading, isError, list } = useList()

  if (isLoading) {

    return 

  }

  if (isError) {

    return 

  }

  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 (

    <>

      toggle menu

  )

}

可以看到，使用‘switch’可以很方便的表达‘menu’和组件的对应关系。

5.使用枚举

如果我们需要根据用户的不同状态显示Foo、Bar、Default三个组件，枚举会比if语句更优雅。

const Foo = () => {

  return 

}

const Bar = () => {

  return 

}

const Default = () => {

  return 

}

const statusMap = {

  foo: ,

  bar: ,

  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 (

        Logout

        Login

  )

}

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

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

相关阅读

 您阅读本篇文章共花了：