七爪源码：你应该知道的 7 个 React 简洁代码技巧-挚友漫画

在本文中，我总结了七个实用技巧，供您编写可维护的 React 代码。

1.有意义的名字

计算机科学中只有两个难点：缓存失效和命名。

与任何其他编程语言一样，命名总是很困难。 我们应该尽量清楚地命名事物，无论是函数、变量还是组件。

一个好的名字应该是直截了当、简洁直接的。 例如：

这里有两个概念，它们可能会在这里引起一些混乱：Todo 和 Item。 实际上，它们在上下文中是相同的。 所以代码可以重构为：

因此，请尝试消除名称中的混淆，尤其是对于那些有消费者（内部或外部消费者）的名称。 请注意，一旦你的 API 发布，它就不仅仅是你的了，所以要更加注意这些公共 API 名称（组件名称、道具名称和类型）。

2. 可测试的 React 代码

传统上，在测试产品代码之前很难设置测试机制。 但是有了 jest 和 react-testing-library，在您的 React 项目中不再适用。

此外，我发现在 React 中应用测试驱动开发非常容易，因为测试设置过程非常轻松。

我并不是说你应该使用 react-testing-library 来代替 cypress 或真正的浏览器测试，但是有了它，你几乎可以模拟用户看到你的代码的真实情况。

您正在测试组件的行为，这就是重点。

3.使用钩子

所以在 React 16.8 之前，在组件之间重用有状态的逻辑并不容易。

如果你在那个版本之后使用 React，钩子应该是你可重用逻辑的默认选择。 我所说的逻辑是指任何与用户界面无关的代码，例如数据获取、状态管理和数据操作。

4.使用组合

构图是一种超级强大的技术，就我个人而言，我将其视为专业开发人员和业余开发人员之间的主要分界线，尽管很难定义开发人员在日常工作中掌握构图的能力有多好。

幸运的是，在 React 中，使用组合非常简单。 如果您使用了 children 或 render prop，那么您已经在使用组合了。

您可以使用标题作为子项：

<GenericCard>

    <h3>I'm a heading</h3></GenericCard>

或者更复杂的组件：

<GenericCard>    <section>        <h3>I'm a heading</h3>        <p>I have some additional description</p>    </section></GenericCard>

而 GenericCard 对传入的孩子一无所知。

5.小元件就是好元件

这是迄今为止我最喜欢的提示，我认为它与我们这里的大多数提示有关。实际上，如果您在代码中看到数百行，那么您可能做错了。即使可能有一些例外，我发现在大多数情况下您可以将代码分成更小的部分以提高质量。

小意味着一次只专注于一件事。因此，该组件易于测试、修改和理解。请注意，我并不是说你应该强制执行一些 eslint 规则来限制代码行，但你应该留意它：当文件增长时，你应该检查你是否在放置逻辑（这些可以放在一个hook），或者它做了太多的事情（这些可以分解成子组件）等等。

6. 关注点分离

我们可以在任何 React 应用程序中将我们的代码分为几类。用于表示传入数据的视图，用于获取数据并将其转换为视图使用的格式的服务或数据提供者，以及基础架构代码（设置 JWT 令牌，确保第三方集成等）。

这些模块或层应该自然地分成不同的地方，但我经常看到人们将它们混合在一起。在许多 React 组件中，他们在文件的前半部分进行一些数据转换。在其他地方，他们试图从不同的上下文中提取随机的东西，然后进行条件渲染。

忍住立即开始创建 tsx 文件的诱惑，首先考虑它属于哪个类别，在它们自己的模块中进行数据计算，然后在你的 React 组件中使用它们。

7. 其他领域的成熟实践

尽管乍一看，React 就像在一个文件中混合了 HTML 和 JavaScript（有时甚至是 CSS）。一旦您熟悉了 jsx 语法，您很快就会注意到 React 代码与一般的其他代码（例如 Java 或 Python）并没有太大区别。

当然，定义变量、调用函数甚至缩进的方式是不同的，但在更高的层次上。您仍在处理模块及其关系，例如，哪个模块正在执行什么任务，以及其他模块如何依赖它们。

这意味着我们也绝对可以借鉴其他领域的经验。就像在面向对象的项目中一样，我们使用一个接口来分离我们可以在 React 中使用的协议和实现（就像在渲染道具中一样）。我们在所有其他编程语言中都有单一职责原则，那么为什么不直接用它来指导我们拆分 React 组件呢？

因此，如果您有其他编程语言背景，请尝试寻找机会在您的 React 代码中应用这些经过验证的实践。