原文链接:https://dev.to/ruppysuppy/7-tips-for-clean-react-typescript-code-you-must-know-2da2

“干净的代码”不仅是可以正常运行的代码。它指的是组织整齐易于阅读易于理解且易于维护的代码。

让我们来看看 React 中“干净代码”的一些最佳实践,它们可以让你更加轻松地维护代码!

1. 为所有值提供显式类型

使用 TypeScript 时,很多人经常不为值提供显式类型,从而错失 TS 在开发中的真正用处

坏栗子 01:

const Component = ({ children }: any) => {
// ...
};

坏栗子 02:

const Component = ({ children }: object) => {
// ...
};

恰当地使用interface 能够让编辑器给你提供准确的提示,从而让敲代码变得更容易

好栗子:

import { ReactNode } from "react";

interface ComponentProps {
children: ReactNode;
} const Component = ({ children }: ComponentProps) => {
// ...
};

2. 更新状态时考虑先前的状态

如果更新状态时新状态依赖于旧状态,在调用更新状态函数时传入函数来更新状态,React 状态更新会进行批处理,如果不使用这种方式更新状态很可能导致意想不到的结果

坏栗子:

import React, { useState } from "react";

export const App = () => {
const [isDisabled, setIsDisabled] = useState(false); const toggleButton = () => {
setIsDisabled(!isDisabled);
}; // 此处调用两次toggleButton的结果和调用一次相同
const toggleButtonTwice = () => {
toggleButton();
toggleButton();
}; return (
<div>
<button disabled={isDisabled}>
I'm {isDisabled ? "disabled" : "enabled"}
</button>
<button onClick={toggleButton}>
Toggle button state
</button>
<button onClick={toggleButtonTwice}>
Toggle button state 2 times
</button>
</div>
);
};

好栗子:

import React, { useState } from "react";

export const App = () => {
const [isDisabled, setIsDisabled] = useState(false); const toggleButton = () => {
setIsDisabled((isDisabled) => !isDisabled);
}; const toggleButtonTwice = () => {
toggleButton();
toggleButton();
}; return (
<div>
<button disabled={isDisabled}>
I'm {isDisabled ? "disabled" : "enabled"}
</button>
<button onClick={toggleButton}>
Toggle button state
</button>
<button onClick={toggleButtonTwice}>
Toggle button state 2 times
</button>
</div>
);
};

3. 保持文件原子性和精简性

保持稳健的原子性和精简性可以让调试、维护甚至查找文件更加容易

坏栗子:

// src/App.tsx
export default function App() {
const posts = [
{
id: 1,
title: "How to write clean react code",
},
{
id: 2,
title: "Eat, sleep, code, repeat",
},
]; return (
<main>
<nav>
<h1>App</h1>
</nav>
<ul>
{posts.map((post) => (
<li key={post.id}>
{post.title}
</li>
))}
</ul>
</main>
);
}

好栗子:

// src/App.tsx
export default function App() {
return (
<main>
<Navigation title="App" />
<Posts />
</main>
);
} // src/components/Navigation.tsx
interface NavigationProps {
title: string;
} export default function Navigation({ title }: NavigationProps) {
return (
<nav>
<h1>{title}</h1>
</nav>
);
} // src/components/Posts.tsx
export default function Posts() {
const posts = [
{
id: 1,
title: "How to write clean react code",
},
{
id: 2,
title: "Eat, sleep, code, repeat",
},
]; return (
<ul>
{posts.map((post) => (
<Post key={post.id} title={post.title} />
))}
</ul>
);
} // src/components/Post.tsx
interface PostProps {
title: string;
} export default function Post({ title }: PostProps) {
return <li>{title}</li>;
}

4. 对具有多个状态的值使用枚举或常量对象

使用枚举或常量对象可以大大简化管理存在多种状态的变量的过程

坏栗子:

import React, { useState } from "react";

export const App = () => {
const [status, setStatus] = useState("Pending"); return (
<div>
<p>{status}</p>
<button onClick={() => setStatus("Pending")}>
Pending
</button>
<button onClick={() => setStatus("Success")}>
Success
</button>
<button onClick={() => setStatus("Error")}>
Error
</button>
</div>
);
}

好栗子:

import React, { useState } from "react";

enum Status {
Pending = "Pending",
Success = "Success",
Error = "Error",
}
// OR
// const Status = {
// Pending: "Pending",
// Success: "Success",
// Error: "Error",
// } as const; export const App = () => {
const [status, setStatus] = useState(Status.Pending); return (
<div>
<p>{status}</p>
<button onClick={() => setStatus(Status.Pending)}>
Pending
</button>
<button onClick={() => setStatus(Status.Success)}>
Success
</button>
<button onClick={() => setStatus(Status.Error)}>
Error
</button>
</div>
);
};

5. 尽量不在视图中编写逻辑

尽量不要把逻辑代码嵌入到标签中

坏栗子:

const App = () => {
return (
<div>
<button
onClick={() => {
// ...
}}
>
Toggle Dark Mode
</button>
</div>
);
};

好栗子:

const App = () => {
const handleDarkModeToggle = () => {
// ...
}; return (
<div>
<button onClick={handleDarkModeToggle}>
Toggle Dark Mode
</button>
</div>
);
};

当然如果逻辑代码只有简单的一行,写在标签中也是可以的

6. 正确地选择条件渲染的方式

正确地选择条件渲染的方式可以让代码更优雅

坏栗子:

const App = () => {
const [isTextShown, setIsTextShown] = useState(false); const handleToggleText = () => {
setIsTextShown((isTextShown) => !isTextShown);
}; return (
<div>
{isTextShown ? <p>Now You See Me</p> : null} {isTextShown && <p>`isTextShown` is true</p>}
{!isTextShown && <p>`isTextShown` is false</p>} <button onClick={handleToggleText}>Toggle</button>
</div>
);
};

好栗子:

const App = () => {
const [isTextShown, setIsTextShown] = useState(false); const handleToggleText = () => {
setIsTextShown((isTextShown) => !isTextShown);
}; return (
<div>
{isTextShown && <p>Now You See Me</p>} {isTextShown ? (
<p>`isTextShown` is true</p>
) : (
<p>`isTextShown` is false</p>
)} <button onClick={handleToggleText}>Toggle</button>
</div>
);
};

7. 使用JSX简写

布尔属性

一个具有真值的属性可以只写属性名,比如truthyProp,而不必写成truthyProp={true}

坏栗子:

interface TextFieldProps {
fullWidth: boolean;
} const TextField = ({ fullWidth }: TextFieldProps) => {
// ...
}; const App = () => {
return <TextField fullWidth={true} />;
};

好栗子:

interface TextFieldProps {
fullWidth: boolean;
} const TextField = ({ fullWidth }: TextFieldProps) => {
// ...
}; const App = () => {
return <TextField fullWidth />;
};

字符串属性

属性值为字符串字面量可以直接用双引号包裹

坏栗子:

interface AvatarProps {
username: string;
} const Avatar = ({ username }: AvatarProps) => {
// ...
}; const Profile = () => {
return <Avatar username={"John Wick"} />;
};

好栗子:

interface AvatarProps {
username: string;
} const Avatar = ({ username }: AvatarProps) => {
// ...
}; const Profile = () => {
return <Avatar username="John Wick" />;
};

Undefined 属性

和普通的TS/JS一样,如果属性未提供值,则为undefined

坏栗子:

interface AvatarProps {
username?: string;
} const Avatar = ({ username }: AvatarProps) => {
// ...
}; const Profile = () => {
return <Avatar username={undefined} />;
};

好栗子:

interface AvatarProps {
username?: string;
// OR `username: string | undefined`
} const Avatar = ({ username }: AvatarProps) => {
// ...
}; const Profile = () => {
return <Avatar />;
};

现在你应该知道怎么编写干净的 TSX 了

完结!撒花!

公众号【今天也要写bug】(op-bot)提问答疑

7个技巧让你写出干净的 TSX 代码的更多相关文章

  1. eslint prettier editrorconfig - 写出干净的前端代码

    FConfidence 关注 2018.12.30 02:38* 字数 2912 阅读 195评论 0喜欢 0 VSCode 插件安装 Prettier - Code Formatter ESLint ...

  2. JAVA语言之怎样写出高性能的Java代码?

    本文主要向大家介绍了JAVA语言之怎样写出高性能的 Java 代码?通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助. 在这篇文章中,我们将讨论几个有助于提升Java应用程序性能的方法.我 ...

  3. 《数据结构与算法之美》 <05>链表(下):如何轻松写出正确的链表代码?

    想要写好链表代码并不是容易的事儿,尤其是那些复杂的链表操作,比如链表反转.有序链表合并等,写的时候非常容易出错.从我上百场面试的经验来看,能把“链表反转”这几行代码写对的人不足 10%. 为什么链表代 ...

  4. 如何用java写出无副作用的代码

    搞java的同学们可能对无副作用这个概念比较陌生,这是函数式编程中的一个概念,无副作用的意思就是: 一个函数(java里是方法)的多次调用中,只要输入参数的值相同,输出结果的值也必然相同,并且在这个函 ...

  5. 如何写出优雅的CSS代码 ?(转)

    对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...

  6. fir.im Weekly - 如何写出零 bug 的代码

    神兽护体,代码无bug.经常看到代码注释的各种形状,这是一种程序员情怀.那么,如何能写出零 Bug 的代码呢,来看看@码农翻身 的这篇手册--零Bug的代码是怎么炼成的. 写零 Bug 一定少不了代码 ...

  7. 如何写出优雅的css代码 ?

    如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...

  8. 用6个字符写出任意的Javascript代码

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用6个字符写出任意的Javascript代码.

  9. 请阐述调用Activity有哪几种方法,并写出相关的Java代码

    请阐述调用Activity有哪几种方法,并写出相关的Java代码. 答案:可以采用两种方式调用Activity:显示调用和隐式调用.显示调用直接指定了Activity,代码如下: Intent int ...

随机推荐

  1. 树莓派开发笔记(十七):树莓派4B+上Qt多用户连接操作Mysql数据库同步(单条数据悲观锁)

    前言   安装了mysq数据库,最终时为了实现在一个树莓派上实现多用户多进程操作的同步问题,避免数据并发出现一些错误,本篇安装了远程服务并且讲述了使用Qt进行悲观锁for update操作,命令行进行 ...

  2. 【Github】 Github修改仓库的基本信息

    前言 我们通常在刚开始了解学习使用github时,一般都是测试的使用,有时我们向里面添加了一些代买,如果想要修改信息并且是删除仓库重新创建提交,可以采用下面方法修改仓库信息,名称.描述等. 修改仓库描 ...

  3. 使用c++爬取股市数据,获取最新行情

    最近自己动手写个小软件(界面原生态,还没来得及加样式哈).每天看看潜力股懒人做法,不介意推荐.资源有限,只能观察一下低价股,分析一下运动规律,什么时候拉升,惯性如何 主要功能:读取网络数据:保存本地数 ...

  4. SLF4J 日志门面

    目录 01.简单介绍 02.日志级别 03.入门案例 03.动态打印 04.异常打印 05.日志集成 06.集成 logback 07.集成 slf4j-nop 08.集成 log4j 09.集成 j ...

  5. DNS 系列(一):为什么更新了 DNS 记录不生效?

    我们在上网时如果想要访问到另一台机器上的内容,通常只需要直接输入一串地址,例如:www.upyun.com,就能够准确访问到自己想要访问的网站.但是实际上这只是方便我们记忆的字符形式网络标识,真正让我 ...

  6. JAVA中计算两个日期时间的差值竟然也有这么多门道

    上半年春招的时候,作为面试官,对于面试表现的不错的同学会要求其写一小段代码看看.题目很简单: 给定一个日期,然后计算下距离今天相差的天数. 本以为这么个问题就是用来活跃面试氛围的,但是结果却让人大跌眼 ...

  7. HTTP协议之Expect爬坑

    前言 今天,在对接一个第三方平台开放接口时遇到一个很棘手的问题,根据接口文档组装好报文,使用HttpClient发起POST请求时一直超时,对方服务器一直不给任何响应. 发起请求的代码如下: usin ...

  8. 简单的数据结构_via牛客网

    题面 链接:https://ac.nowcoder.com/acm/contest/28537/K 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K,其他语 ...

  9. C++中关于cout相关的输出格式(操作流算子)

    这边需要注意的是如果使用到setpercision,一定要引入iomanip头文件,否则编译会出错 注意以下的操作流算子都是在头文件iomanip中定义的,强烈建议使用的时候引入改头文件否则可能会出现 ...

  10. SpringBoot集成文件 - 如何基于POI-tl和word模板导出庞大的Word文件?

    前文我们介绍了通过Apache POI通过来导出word的例子:那如果是word模板方式,有没有开源库通过模板方式导出word呢?poi-tl是一个基于Apache POI的Word模板引擎,也是一个 ...