最佳 React 实践

在这篇博客中，我将解释一些使用 React/React-Native 或其他 JavaScript 应用程序的最佳实践。以下指南不仅可以减少陷阱，还可以提高你的代码的可扩展性。

免责声明：本指南仅供参考。请根据您和您的团队的情况，选择最合适的方案，并严格遵循。

让我们逐一讨论这些做法。

TL;DR

测试、Typescript 和 Linting。

测试。

就是这样！我说的就是这些。尽可能多地、严格地测试你的 WIP（正在进行的工作）。如果你的代码通过了测试，你就快完成了。不要绕过你的工作进行测试。是的，我知道你已经听过无数遍了，但让我来为你写一些测试工具吧。

笑话

Facebook 公司支持的 JavaScript 测试框架。它是 JavaScript 应用程序测试的事实上的标准。支持 Node、Typescript、React、Angular、Bable 等项目。

酶和/或反应测试库

它是集成测试的强大工具。单元测试本身并不能保证你的应用即使通过了也能正常工作，因为单元之间的关系可能存在问题。你应该使用集成测试来测试不同的功能。

柏

Cypress 是一款端到端测试工具。它还允许您编写单元测试和集成测试。这些测试通常在整个应用程序上运行。

“对浏览器中运行的任何内容进行快速、简单且可靠的测试。”

代码检查。

你的代码库虽然通过了测试，但对其他开发者来说仍然可能很麻烦。如果代码库不遵循严格的编码标准指南，这将直接影响其可扩展性。可扩展的代码与无错误且经过测试的代码同样重要。ESLint 可以让你制定统一、标准的编码指南。项目应该遵循且仅遵循一个标准协议。更多详情，请查看我的 ESLint 博客。

打字稿。

TypeScript 是一种基于 JavaScript 构建的强类型编程语言，可为您提供适用于任何规模的更强大的工具。TypeScript 为 JavaScript 添加了额外的语法，以支持与编辑器更紧密的集成。您可以在编辑器中尽早捕获错误。在简单的应用程序中使用 TypeScript 通常显得有些过分。但是，如果您的项目规模中等到较大，则应该考虑使用 TypeScript 进行开发。

虽然 Typescripting、测试和 Linting 涵盖了主要部分，但您还可以遵循以下一些其他实践：

图书馆

有了 npm，你手头就有成千上万个第三方库可以使用。但你还是应该谨慎选择添加到项目中的第三方库。通常来说，添加的第三方库越多，你对项目的控制力就越弱，项目也会变得越臃肿。以下是一些建议。

• 检查依赖项的更新或维护频率。您可以访问 Github 仓库，查看未解决的问题和最近的活动。
• 您可以查看每周的下载量。它可以让您大致了解该依赖项的受欢迎程度。
• 确保您添加的依赖项得到真实贡献者的支持。
• 您还应该考虑检查解压后的大小和最后发布的日期。

严格的 CI/CD

毋庸置疑，你应该设置一个运行所有测试用例和 lint 脚本的 CI/CD。如果你希望 Bug 进入生产环境，也可以设置宽松的 CI/CD。考虑使用 Github Actions 或 CircleCI。每次有人合并或推送更改到主分支时，都应该有一个 Actions 预先运行所有测试场景和 lint 脚本。

评论

你认为你的代码需要注释才能更好地理解吗？很有可能，你是对的。在必要的时候和必要的地方添加注释。但是，你应该考虑以下几点重要事项：

• 必要时更新您的评论。
• 请在评论中随意提及门票 ID 以供参考。
• 不要写不必要的注释。例如：

// assigning 10 to the x

let x = 10;

代码重构和文档维护

他们说编程的第一条规则是，

“如果它正在工作就不要碰！”

我不想显得无礼，但我不相信这一点。我相信——能改进就改进。能优化就优化。有了版本控制系统，我甚至不介意尝试一下。你应该考虑偶尔重构一下代码库。如果不是每周，最好是每月一次。

贡献？发现错误？

欢迎随时联系我，我很乐意听取您的意见！感谢您的阅读。