10 个关注点以及如何让整个 React 代码库更简洁

从头开始创建一个项目很容易，但一段时间后交付功能会变得非常困难，并且会带来延迟、错误以及最终产品损坏的成本。

仅仅代码能用是不够的。所以，如果你想要快速完成工作，如果你想要代码易于编写，那就让它易于阅读。——罗伯特·C·马丁

哇，这看起来是个很棒的建议，但如何让代码可读性更高呢？尤其是在代码已经变得一团糟，而且每次修改都带来灾难性后果的情况下。在开发 React.Js 应用程序时，我们遵循了以下策略和原则：

当然，糟糕的代码可以被清理。但代价非常高昂。——罗伯特·C·马丁

1. 代码检查和美化
完美缩进的文件是代码可读性的第一步。我们添加了 eslint 规则，并扩展了 airbnb 配置，例如放宽了“import/prefer-default-export”等限制，因为这使得在所有地方重命名函数变得困难。我们还进行了调整arrow-body-style，以便我们可以添加断点并在需要时调试函数。此外，我们还进行了其他一些小改动，例如 react/jsx-filename-extension。

2. 绝对导入

导入函数、常量和组件是构建 JavaScript 应用程序不可或缺的一部分。但如果目录结构嵌套很深怎么办？我们最终会这样写import {getUser} from &../../../store/users/action。为了解决这个问题，我们在 create-react-app 设置中指定了 ，NODE\_PATH=src这样就摆脱了点/斜线的混乱，这又迈出了一小步。

3. 解耦 React 组件（关注点分离）
在 React 应用中，将 props 传递到深层组件，在 2-3 层之后就会成为瓶颈。我们解耦了这些 props 层级，并重构了组件，使其能够以零依赖或极低依赖（借助 Redux）进行渲染。我们还添加了错误边界，以确保任何故障不会传递到最高层。

4. 可复用组件（避免重复） 创建可复用组件是提升可读性的关键。我们开发了模态框、应用主题、卡片、错误组件以及其他基本构建块。并进行复用以保持一致性并减少代码编写。我们还专注于在细粒度上复用代码块，例如过滤数组、转换某些 API 响应等。

5. 组件的 props 验证 添加 props 验证功能，让我们在处理必需、非必需、字符串类型和布尔类型 props 时拥有了极大的优势。它让我们能够灵活地重用组件，并将组件从一个文件移动到另一个文件，从而重构冗长的文件。

6. 将业务逻辑集中到一处（保持简单易懂）
说到 KISS，前端代码库维护起来有点困难，而且它主要包含业务逻辑的大部分。因此，我们创建了容器组件，用于组装多个纯组件，并渲染所需的复杂设计实现。通过这种方法，我们的辅助组件尽可能地简洁。这些纯组件不包含任何业务逻辑，并且以后可以非常轻松地进行测试。

7. 单一来源配置
在设计产品时，我们经常会遇到基于不同配置驱动功能的需求。我们将其保持在最高级别，所有功能都由该单例对象引用。我们还添加了转换功能来更改数据模型，以确保轻松访问配置数据对象的嵌套属性。

8. 函数式方法（单一职责原则）
测试是在整个开发过程中保持代码可读性的唯一方法。但单元测试需要我们思考和编写代码的方式发生重大转变。如果我们的代码中包含纯函数，并遵循不变性原则来避免不必要的副作用，那么测试就会变得非常容易。函数式方法是一种面向价值的编程范式。我们可以使用遵循单一职责原则 (SRP) 的小型纯函数，并且每次只执行一项任务。我们可以使用多个这样的纯函数来获得所需的结果。

9. 变量命名和注释的编写 我发现，变量和函数的命名是最容易被低估的。我们必须花足够的时间来决定名称，并且不应该有任何歧义。注释只是编写糟糕代码的借口。编写注释永远不是一个好习惯，因为在未来的代码更改时更新注释会成为一种负担。然而，在复杂的业务逻辑下，编写注释是合理的。但我们必须专注于编写清晰、富有表现力且易于理解的代码。

10. 执行规则，使代码在每次变更后都更加简洁。 在对代码库进行这些重大变更后，我们在持续集成 (CI) 流水线中加入了检查，并使用 Enzyme 集成了 Jest，以提高单元测试覆盖率。我们还集成了 Cypress 进行集成测试。我们的流水线包含 eslint、Cypress 和 Jest 三个阶段。代码库的每次变更都必须确保这三个阶段的成功。

我们确信并有信心以前所未有的速度交付功能，且不会破坏任何功能。是的，现在我们不会再频繁地说“它有效”。我们将继续使代码库日复一日地变得比以往任何时候都更整洁。我们产品中的所有重构都受到Robert C. Martin所著《代码整洁之道》一书的启发。 最后，我引用这句话作为结束语。

“干净的代码总是看起来像是由一个用心的人编写的。——罗伯特·C·马丁”

因此，请重构您的代码并关心您的产品并展示一些❤️！