来自高级 React 开发人员的 17 条建议

过去 5 年多来，我一直作为 Palantir 的工程师编写 React 代码。

我希望在我刚开始的时候有人能与我分享这 17 条建议。

准备好了吗？快来一探究竟！💪

📚 下载我的免费 101 React 技巧和窍门书，抢占先机。

1. 在学习 React 之前先学习 JavaScript

刚开始时，我从编写函数和基本的 DOM 操作跳到学习 React。

正如您所猜测的，事情进展并不顺利🤯。

对于初级开发人员来说，这是一个常见的错误：在没有扎实理解 JavaScript 的情况下尝试学习 React。

这很容易让人困惑：

• 你不会知道什么是 React 特有的，什么只是 JavaScript。

• 调试变成了一场噩梦。

那该怎么办呢？

• 学习足够的 JavaScript 以适应环境（查看JavaScript to Know for React）。

• 然后深入研究 React。

2.阅读 React 文档

您不需要金钱💰、教练或花哨的课程来学习 React。

前往React 官方网站并：

• 按照快速入门指南进行操作。

• 阅读学习章节（即使它们最初没有意义，但以后就会明白）。

3. 尽早开始建设项目

观看教程并不能让您成为 React 开发人员。

在课程上花费 100 美元、200 美元甚至 700 美元也不会。

会怎样？建设项目。

这是最好的方法：

• 通过犯错误来学习。

• 发现你的知识中的差距。

• 掌握新的模式和技巧。

没有灵感？试试这些资源👇：

• 前端导师：适合所有技能水平的项目。

• 前端实践：重建真实的网站。

• 前端项目：多种多样的项目想法。

• JavaScript Mastery：一个提供基于项目的教程的 YouTube 频道。

4. 使用值得信赖的库

并非所有包裹都是安全的。

例如，2021 年，一个流行的 NPM 包ua-parser-js遭到黑客攻击，传播恶意软件📛。

为了最大程度地降低风险：

• 使用来自可信赖作者的库。

• 检查下载量是否良好以及是否定期更新。

5. 尽可能使用 Vanilla JS 解决问题

以前，您需要像lodash这样的库来完成克隆、迭代等任务。

但现代 JavaScript 已经有了很大的改进。

现在，您可以使用本机方法实现很多目标。

因此，如果没有必要，就不要添加库。

为什么？

您添加的每个库：

• 增加应用程序的依赖性，使其更容易受到安全问题的影响。

• 可能会增加您的捆绑包大小，从而减慢加载时间。

• 增加应用程序的构建/编译时间

• 产生维护开销以保持依赖项更新。

在使用库之前，先检查一下 Vanilla JS 是否可以胜任。通常情况下是可以的 😉。

6. 尽可能优化 bundle 大小和延迟加载

开始很慢。

您在此处添加一个包。

然后那里还有另一个。

然后又一个。

在您不知不觉中：

• 用户抱怨该应用程序加载时间太长。

• 开发人员抱怨构建过程太慢了。

为什么会发生这种情况？

添加软件包和重型组件时没有考虑它们对捆绑包大小的影响🤦‍♀️。

如何修复？

• 尽可能采用延迟加载。

• 设置检查来跟踪捆绑包大小的增加（Pull Request 操作对此很有效）。

• 在将包添加到项目之前，请使用bundlephobia检查包大小。

7. 共置相关逻辑

按类型（例如，组件、实用程序、i18n）对文件进行分组似乎是一个好主意，但事实并非如此。

为什么？

• 当文件分散时，遵循组件的逻辑会变得更加困难。

• 您可能会清理组件但忘记相关文件。

相反，将所有组件的逻辑和资产保存在一个文件夹中。

8.保持组件简单

避免使用“上帝”组件——那些试图做所有事情的组件。

它们有问题❌因为：

• 它们更难阅读和理解。

• 它们经常导致版本控制冲突（Git、GitLab 等）。

• 修改它们可能会无意中影响整个应用程序。

那该怎么办呢？

• 想想如果你和队友一起工作，你会如何构建你的代码。

• 让您的组件专注于一项任务，以最大限度地减少冲突。

这种方法可以使您的代码保持干净并帮助您的团队更高效地工作。

9.解决多样化的问题

你用 React 解决的问题越多，你就会变得越好🚀。

你应对的每一个挑战都会教会你一些宝贵的东西：

• 您发现了新的模式和反模式。

• 您向开发人员工具箱中添加了更多工具。

• 您对自己的技能充满信心。

但关键在于：不要只是练习——要改变练习方式。

探索不同类型的问题、项目和解决方案。这种多样性将帮助你作为 React 开发者更快地成长。

10.学习良好的编程模式

作为 React 开发者，你还应该关注基础编程技能：

• 数据结构和算法（例如集合、映射、递归）。

• 类似于《程序员修炼之道》中的原则。

11.阅读大量 React 代码

构建项目并不是学习的唯一方式——阅读代码也同样有价值💪。

它可以帮助您：

• 掌握新的技巧和窍门。

• 比较解决问题的方法。

因此，请查看：

• GitHub 上的开源项目。

• 您的队友在工作时使用的代码。

12.尽快使用 TypeScript

有之前和之后的TypeScript 😅。

前：

• 您花费额外的时间来仔细检查是否传递了正确的道具。

• 调试可能需要几个小时，才能意识到您传递了错误的值 - 或者更糟的是undefined。

后：

• 您专注于构建组件和定义类型。

• 您可以在生产之前发现这些愚蠢的错误。

TypeScript 不仅仅是一个工具——它还可以彻底改变你的 React 工作流程。

13. 避免早期抽象

我以前经常犯这样的错误🙈。

每当我设计一个简单的组件时，我都会尝试使其可重复使用且面向未来。

问题是什么呢？我经常因为没有迫切的需求而创建错误的抽象。

这导致了两个结果：

1. 我最终会重构代码。

2. 或者更糟糕的是，我不得不忍受尴尬的抽象，这让开发变得更加困难。

那该怎么办呢？

• 编写一个组件来解决当前的问题。

• 仅当明确需要重用时才进行扩展，并逐步进行。

要深入了解该主题，请观看Dan Abramov 的这个精彩视频。

14. 优先使用 React 内置的状态管理

您不需要立即使用Redux或Jotai 。

React 的 useState、useReducer 和 useContext 对于简单的应用程序大有帮助。

15. 不要盲目听从网上的建议

几年前，我在网上看到一篇文章，说记忆法是“邪恶的”。

因此，我停止在我的 React 应用程序中使用它。

直到我在生产环境中导致一个应用程序崩溃。😅

对于分享该建议的开发人员来说，这个建议很有道理，但对我来说却适得其反，因为：

• 我有不同的用例。

• 我需要在我的应用程序中使用效果。

• 我正在处理大型组件。

要点是什么？不要盲目地听从你在网上找到的建议。相反，你应该：

• 与您的队友讨论（如果有的话）。

• 评估它是否适用于您的特定情况。

注意：通过 React 19 的优化，这个建议可能最终是准确的😅 。

16. 留出重构的时间

当开发人员看到糟糕的代码后，过于害怕清理，系统就会开始腐烂。腐烂程度越严重，恐惧感也越强烈——腐烂速度就越快。到了一定时候，代码会变得一团糟，以至于没有一个开发人员能够预估某个特定更改的影响。添加一个图标可能会破坏其他不相关的功能。

鲍勃·马丁叔叔

有时，你会注意到：

• 您的 React 组件不再有意义。

• 它们变得复杂或太大。

• 还有改进的空间。

当这种情况发生时，需要 5-30 分钟进行重构。

小的、定期的增强可以使您的组件更易于管理并避免麻烦。

17. 仅在必要时使用框架

剧透：您不需要框架来使用 React。

简单的 React、Vite和react-router设置可以发挥很大的作用。

仅当您的应用需要其功能时才使用Next.js或Remix等框架。

就这样结束了🎉。

留下评论📩来分享您的最佳建议。

并且别忘了说一声“💖🦄🔥”。

如果您正在学习 React，请免费下载我的《101 React 技巧与窍门》一书。

如果您喜欢此类文章，请加入我的免费时事通讯FrontendJoy。

如果您需要每日提示，请在X/Twitter或Bluesky上找到我。

🐞 发现错误