轻松扩展 React 项目的 5 个最佳实践

对于大多数 React 开发者来说，动手编写新代码很容易。然而，随着项目规模的扩大，我们有时会忽略如何妥善组织和规划这些代码，以备将来使用。

制定扩展计划可​​以帮助您：

1. 重复使用并减少开发时间
2. 组织项目并防止项目重建
3. 通过考虑项目和其他开发人员来表明你是一名优秀的开发人员:)

以下是我从扩展 React 项目过程中学到的 5 个经验教训。它们帮助我在编写美观的 React 代码的同时，提前规划项目。

1. 始终从状态管理开始

当项目规模较小时，我直接为各个组件编写状态。然而，当我想同步多个组件的状态并尝试使用 props 和回调函数时，事情变得一团糟。

始终从状态管理工具入手，无论是 Redux、Recoil，还是 context 和 hooks。即使项目很小，也需要 Authenticaiton 和 Alert 来进行全局管理。

此外，状态管理将逻辑与组件分离。在处理后端调用时，它就像 UI 和数据库之间的控制器/服务层。此层中的状态和操作可以在多个组件之间重用。

这里有个小技巧，就是始终跟踪后端调用的等待状态，以便进行条件组件渲染。这样可以避免不必要的错误，并向用户显示一个美观的加载旋转图标。

2.制作自己的组件库

我发现即使我使用像 Material UI 这样的 UI 库，我仍然需要对我的项目的道具、逻辑和样式进行定制。

创建自定义组件库允许我跨页面重复使用它们，甚至导出到其他项目。

为每个自定义组件添加样式、测试、类型和Storybook模板（推荐）。一个好的做法是像下面这样以原子设计的方式组织库。

custom-components
├── atoms
│   └── CustomButton
│       ├── CustomButton.tsx
│       ├── CustomButton.types.tsx
│       ├── CustomButton.styles.tsx  
│       ├── CustomButton.test.tsx
│       ├── CustomButton.stories.tsx
│       └── index.tsx
├── molecules
│   └── CustomDialog
└── organizations
    └── CustomTable

3. 定义类型

众所周知，JavaScript 是动态类型语言。当项目规模扩大时，跨组件和函数传递的 props 也会随之增加。

如果没有类型检查，可能会发生许多不必要的错误，例如null和 之类的边缘情况undefined。定义类型还可以提高代码的可读性。

如果可能的话，最好从 TypeScript 开始或迁移到 TypeScript，但定义PropTypes也有效。

4. 使用全局和特定样式

样式一直是前端开发者的一大难题。我们既要处理统一的样式，又要处理个性化的样式。

如果项目提供了像 Figma 这样的 UI 设计，请尝试先在全局主题中定义样式。最好在 UI 库的主题提供程序中定义样式，以便轻松地在已定义的调色板上进行自定义。主题提供程序还会为您处理明暗主题。

对于单个组件的样式，请尝试将其包含在上面提到的自定义组件库中。如果它们是特定于某个组件的，请将其包含在该组件下的样式文件中。

经验法则是在顶层包含需要重复使用的样式。

5. 将页面文件夹与路线同步

以前，我把页面和组件文件夹弄得相当混乱，只将两个文件夹放在一个文件夹中。

后来我意识到，最好将页面文件夹与路由同步组织。这样可以提高其他开发人员理解网站结构的可读性，就像下面这样。

pages
├── events
│   ├── index.tsx
│   └── event
│       ├── index.tsx
└── user
    └── index.tsx

events对应于/events，且event对应于/events/:id。

我使用相同的结构来将组件与使用它们的页面对应起来。但您也可以/components在每个页面下创建一个文件夹，并将组件文件夹用作其他用途。

这些是我在规划 React 项目规模方面的一些最佳实践，每个人都有自己的方法。总结这些最佳实践的两条经验法则是：

1. 分离和重复使用
2. 组织以提高可读性

祝你编码愉快！🚀