腾讯|广州蓝景分享—前端 React 开发使用的小技巧产业互联网|汤道生

Hello~~各位小伙伴，今天我们广州蓝景实训部，继续和大家分享前端技术干货。
在 React 中，我们经常会编写条件语句来显示不同的视图，比如这个简单的例子。
const App = () => {
return (
<>
{
loading ? <Loading /> : <List>

</>

但是，当项目的代码量足够大并且有很多 JSX 条件时，事情很快就会失控。代码变得非常混乱且可读性差。
像下面这段代码，我真的没有勇气和信心去了解它的细节。
import React { useStatefrom \"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>
) :
【腾讯|广州蓝景分享—前端 React 开发使用的小技巧】<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 = () => {