编写干净的 React 代码对于任何新开发人员来说绝对是一项艰巨的任务，但是使用 React 最佳实践将逐渐建立您以最简单和最快的方式编写更好代码的信心。

在本文中，我们将重点介绍每个 React 开发人员应该遵循的 10 个最佳实践，以成为更好的开发人员。

React 是一个易于使用、声明性和基于组件的框架，用于构建高度交互的用户界面。它是 Facebook 推出的一种流行的前端技术，目前在全球拥有 800 万用户。

但是，对于开发人员而言，遵循一些有关该技术的基本实践以充分利用其功能并保持代码整洁和有条理是至关重要的。

例如，在 React 中，您可以重用代码和设计组件，从而节省开发人员的时间。但是在创建组件时，开发人员需要遵循一些基本规则以使其可重用，否则可能会导致一团糟。

1. 将较大的组件分解成较小的组件

要使组件可重用，请将较大的组件分解为较小的组件。这意味着不是将多个功能放在一个组件中，而是创建一个负责单一功能的组件，该原则被称为“单一责任原则”。

从长远来看，分离组件将有助于我们阅读、维护、调试、重用和扩展代码，因为随着时间的推移，由于添加了新功能，项目会变得越来越大。

2. 使用函数式组件而不是类

如果您不熟悉 react，您可能会对使用什么、功能组件或类组件感到困惑。

这是答案！

功能组件是简单地接受数据并以某种形式显示输出的无状态组件，而类组件是实现逻辑和状态的有状态组件。

如果您正在编写不需要访问生命周期方法或拥有自己的组件状态的展示组件，那么您应该使用功能组件。另一方面，如果您需要管理状态，请使用类组件。

以下是使用函数式组件的好处：

• 它们很容易测试、调试和重构，因为它们是用纯 Javascript 函数编写的，没有状态和生命周期钩子。
• 减少代码行数
• 消除“这个”的使用

3. 选择 styled-component 而不是其他 CSS-in-JS 库

Style-Component 是最受欢迎的库之一，它提供了一种在现代 JavaScript 中使用 CSS 的简单方法。它使开发人员能够编写每个组件很好地隔离的 CSS，同时保留级联的全部功能。

使用样式组件的一些优点是：

• 提供使用 CSS 构建自定义组件的自由
• 强制使用道具（props ）代替类
• 支持带有样式表再水化的服务器端渲染
• 可以使用 Jest Styled Component 执行单元测试 - 一组使用 Jest 测试样式组件的实用程序。

4. 按照 React 的方式为每个组件相关的所有文件创建单独的文件夹

遵循构建 React 应用程序的 React 方式。正确维护的文件夹和文件结构可帮助您了解项目流程并简化代码维护和提取到任何其他项目。

根据组件组织文件，如果有几个小组件被另一个大组件使用，则将所有相关组件仅保留在另一个组件文件夹中，并在整个项目中保持相同的层次结构。

例如，Form 组件有 CSS 文件、图标、图像、测试等小组件，以及其他子组件，所有这些都应该放在一个文件夹中。

5.避免使用索引作为关键道具

根据 React 文档，Key props 有助于做出反应以识别已更改、添加或删除的项目。因此，应将密钥赋予数组内部的元素，以赋予元素稳定的身份。

那么如果使用索引作为 key props 会发生什么呢？

React 使用 key props 来确定要渲染或重新渲染的内容，因为 React 不会浪费时间重新渲染副本。因此，当两个元素具有相同的键时，React 将省略一个。

另一件需要担心的事情是，尽管实际内容没有改变，但 React 还会重新渲染键已更改为特定元素内容的元素。

6.使用默认道具和道具类型

在 JavaScript 中，您不能将变量和参数设置为特定类型。因此，变量类型有可能被误解。

此外，JavaScrip 不允许为对象或组件设置默认属性，或指定 React 中哪些属性是必需的，哪些是可选的。如果您忘记将属性分配给所需的对象或组件，这将导致问题。

上述两个问题都可以使用 prop type 和 default props 来解决。它还有助于提高代码质量，使测试和调试更加安全和快捷。

7. 避免在初始状态组件处使用道具

使用 props 生成初始状态组件通常会导致“事实来源”的重复。这是因为 getInitialstate 仅在首次创建组件时被调用一次。

下次在组件上对 props 进行更改时，它保持不变，因为之前的值不会被更新。这个问题可以通过避免在初始状态下使用道具来解决。

8. 将有状态方面与渲染隔离开来

React 组件可以是有状态的或无状态的。有状态的组件跟踪变化的数据，而无状态的组件总是呈现相同的数据。

为了最大限度地降低组件复杂性，将有状态数据加载逻辑与呈现无状态逻辑隔离始终是一个好习惯。

9. 始终遵循命名约定

遵循命名约定可确保用户知道如何命名数字资产，以便它们保持一致和正确。它们有助于文件组织和管理，如果没有命名约定，处理代码资产可能会非常困难。

在 react 中，主要有三种命名约定，

• 组件应该是 PascalCase
• 需要key的元素应该是唯一的
• 方法应该用 camelCase 编写，而不是特定于应用程序

10. 为整个代码编写测试

测试确保代码完整性。因此，最好在组件目录中创建一个 Test 目录来执行所有必需的测试，并确保添加新代码不会破坏现有功能。

你可以进行，

1. 单元测试来检查 React 应用程序的各个组件。
2. 集成测试以检查不同的模型是否可以很好地协同工作。
3. 端到端测试以检查整个应用程序流程。

总结：

在这里，我们介绍了 React 开发人员应该遵循的 10 个最佳实践来实现干净的代码、简化代码维护和测试。

希望所有这些最佳实践将帮助您创建一个干净且组织良好的 React 项目，并从长远来看避免任何问题。

查看我其他有用的博客，

1. Advanced React Roadmap
2. React Component Patterns
3. Advanced Javascript Design Patterns
4. State management with Redux toolkit

“如果您正在寻找构建高质量 Web 或移动应用程序的最佳方法，那么请开始使用 DhiWise——世界上第一个 ProCode 平台来加速您的应用程序开发，支持最新技术，如 Flutter、React、Node、Kotlin、iOS 和 Laravel。 ”

原文：https://medium.com/dhiwise/10-best-practices-every-react-developer-shou…

本文：https://jiagoushi.pro/node/1864