原文链接 5 Essential React Practices for Building Robust Applications - 作者 Suraj Vishwakarma
TL;DR
当我在团队中开始工作，我以为我已经很了解了，但是有些实践我只是知道但是没有实施。我的项目并没有那么复杂。但是，随着应用迭代，好的实践变得尤其重要，用来维护一个简洁，可扩展和可执行的代码。
今天，我将列出一些在工作中学习到的一些 React 重要实践。如下👇
维护一个可扩展的代码结构
维护一个复杂的应用，一个好的项目结构管理有利于应用的迭代。在我们的团队中，我们拆分功能特性到指定的文件夹中。这基于功能或者模块。整个应用用到的组件存放在项目根目录的文件夹中。
React 代码的结构是以 import 开始，return 结尾，它们之间就是定义代码结构。在刚开始工作的时候，我并没有正确的代码结构。在我的团队中，我们按照顺序使用下面的代码结构。
- Imports ：所有必要的模块必须在文件顶部引入。如果文件过大，可以换行来区分
UI组件和其他组件。 - Constants ：
Imports引入之后，我们应该定义常量而不是React函数，比如下拉选项，初始值等。 - React Function ：接下来，我们可以定义
React函数了。 - Variable Definition ：使用
useState钩子来定义变量。 - Function ：定义变量之后，我们开始定义必要的函数，比如
JS函数，API调用函数等。 - useEffect Calls ：在一般函数之后，我们就需要调用
useEffect钩子。我犯了一个错误 - 定义一个函数后，然后调用useEffect，然后再定义一个函数，再调用useEffect... - Return ：然后函数我们的
React函数。
推荐的工具👇
- ESLint：能够快速定位你代码问题并强制你按照代码标准来编写。我们团队使用它来管理代码结构和执行标准。
- Prettier：可选的代码格式化工具，确保我们整个代码仓库是统一的风格，消除有关格式的意见不统一。
限制非必要的 API 调用
在小应用中，我们发起少数的 API 请求。但是，在复杂的应用中，我们可能需要通过 query 参数发起 API 请求。在我们需要表格 table 这个场景来展示信息，现在，我们需要添加一些过滤的信息。这也许有很多个过滤条件，比如是个场景过过滤。这个时候，我们有可能调用了非必要的 API，或者因为 useEffect 中前一个代码变更而调用了两次 API。
嗯，我们需要让应用只是发起必要的请求。我们可以通过使用更少的 useEffect，这样我们就不需要维护更多的 useEffect 所带来的 API 调用的副作用。通过限制调用，我们将减轻服务端的压力，更少数据传输的消耗，然后得到更丝滑的应用。
推荐工具👇
- Lodash：这是一个提供易使用
debounce和throttle函数的工具库。
使用状态管理而不是属性传递
属性传递 Prop drilling 是通过多层嵌套组件传递状态的过程，即使中间层不需要。我之前做过一个功能，同事纠正了我，然后我使用状态管理而不是属性传递。这在通过 React 导航传递状态很有帮助。
通过状态管理方案，使得组件简化，简化状态逻辑和让应用的数据流可预测和更容易定位问题。
推荐工具👇
- Redux：我们的团队是使用
Redux来做状态管理，有时候会用来触发API的调用。 - Zustand：一个轻量级且
Redux可替代的状态管理工具，有更简单的API调用和全局的状态管理能力。
Web 中做分页，移动端做无限滚动
这不是代码实践，而是产品设计，让我们的应用响应式和更有用。这对我们有很多的数据需要展示时候，很有帮助。在我们的团队中，我们都使用 React 进行 web 和移动端的开发。在移动端中，它是被嵌套在手机应用中。我们选中这个方案的解析如下👇
- Pagination ：对
web application使用分页是个好选择。给用户一个清晰的区块，更好的SEO和轻松添加到书签或者返回特定的页面。 - Infinite Scroll ：当用户滚动来持续下载内容，这对
mobile applications来说是一个好方法。它创造了一种无缝且求知体验，鼓励人们去探索。
推荐工具👇
- react-infinite-scroll-component：我们在移动端组件中使用这个简单，轻量级的无限滚动的库。
- 组件库中的分页功能 ：大多数的组件库，比如 MUI, ShadCN 等，都提供可以直接使用的分页功能。
在给 QA 前进行单元测试
注意：上面的图来自 headspin
不局限于 React，不管何时你编写代码，自测都要做。即使有测试团队 QA，我们需要自己测试编写的功能，然后提供一个更稳定的版本给测试团队。一开始，我只是设计并整合应用，然后就把功能给到了测试团队，这造成很多 bugs 反馈。所以，我的团队建议在给到测试前，我们应该做些单元测试。
做单元测试无疑是增加了开发的时间，但是能够让功能更加健壮，并在以后处理更少的 bugs。
推荐工具👇
- Jest ：一个很受欢迎的
JavaScript测试框架，提供test runner，断言库和mock能力。
总结
掌握这些实践 - 代码结构，状态管理，数据获取和测试是编写优秀 React 应用的关键。这些基石会不止会让我们编写可扩张和性能优的产品，更会让我们的团队很愉快地进行维护。