腾讯|广州蓝景分享—前端 React 开发使用的小技巧

腾讯|广州蓝景分享—前端 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 = () => {