最近在做性能优化时，你是否也遇到过这样的困惑：明明按照各种最佳实践优化了代码，但性能提升却不够理想？今天我们就来聊聊在实际项目中经常被忽视的性能优化细节，看看有哪些容易被忽略但效果显著的优化手段。作为一名在Palantir工作了五年多的React工程师，我总结了17条我希望当初入行时就有人分享给我的建议，希望能帮助你少走弯路，成为更优秀的React开发者。
1. 先打好JavaScript基础
很多初学者都会犯和我一样的错误：直接从基础的DOM操作跳到学习React。这就像没学会走路就想跑步，结果可想而知。如果你对JavaScript的基本概念都不熟悉，你很难区分哪些是React特性，哪些是JavaScript本身，这将使调试变得非常痛苦。
那么应该怎么做呢？
花些时间学习JavaScript，达到熟练掌握的程度。例如，你可以学习JavaScript to Know for React。然后再深入学习React。
2. 认真阅读React官方文档
学习React并不需要昂贵的课程或者昂贵的教练。React官方网站是你最好的老师。你可以从快速入门指南开始，然后阅读学习章节。即使有些内容一开始难以理解，也不要担心，随着学习的深入，它们会慢慢变得清晰起来。
3. 尽早开始构建项目
光看教程是学不会React的，花钱上各种课程也不行。唯一能够让你真正掌握React的方式就是自己动手构建项目。在实践中，你会犯错，会发现知识的盲点，并掌握新的开发模式和技巧。
如果你不知道该做什么项目，可以尝试以下资源：
- Frontend Mentor：提供各种难度级别的项目。
- Frontend Practice：让你模仿真实网站进行练习。
- Frontend Projects：提供各种各样的项目想法。
- JavaScript Mastery：一个YouTube频道，提供基于项目的教程。
4. 使用可靠的第三方库
并非所有的NPM包都是安全的。例如，在2021年，一个流行的NPM包ua-parser-js被黑客攻击，导致恶意软件传播。为了减少风险，请使用来自可信作者的库，并检查它们的下载量和更新频率。
5. 尽可能使用原生JavaScript解决问题
以前，我们需要像lodash这样的库来完成克隆、迭代等任务。但现代JavaScript已经有了很大的改进。现在，你可以使用原生方法实现很多功能。因此，如果没有必要，尽量不要添加额外的库。
为什么要这样做呢？
- 每个库都会增加应用的依赖，使其更容易受到安全问题的影响。
- 可能会增加打包体积，减慢加载速度。
- 会增加应用的构建/编译时间。
- 需要维护和更新这些依赖。
在添加库之前，请先检查是否可以使用原生JavaScript解决问题。通常情况下，原生JS可以满足你的需求。
6. 优化打包体积并尽可能懒加载
刚开始，你可能觉得没什么问题。但随着你添加越来越多的库和组件，你会发现应用加载速度变慢，构建过程也变得非常耗时。这是因为你没有考虑到这些包和组件对打包体积的影响。
要解决这个问题，请尽可能懒加载，并设置检查以跟踪打包体积的增长。你可以使用 bundlephobia 来检查库的大小，然后再将其添加到你的项目中。
7. 将相关逻辑放在一起
按类型（例如，组件，工具，i18n）组织文件看起来可能是一个好主意，但它实际上不是。这样做会导致组件的逻辑分散在各处，难以跟踪，并且可能会遗漏一些相关的文件。相反，你应该将组件的所有逻辑和资源放在一个文件夹中。
8. 保持组件简洁
避免创建"上帝"组件——那些试图做所有事情的组件。它们难以阅读和理解，容易导致版本控制冲突，并且修改它们可能会意外地影响整个应用。你应该像和团队成员合作一样考虑如何组织你的代码。保持组件专注于一项任务，以最大程度地减少冲突。
9. 解决各种不同的问题
你用React解决的问题越多，你的能力就会越强。每个挑战都会教会你一些有价值的东西，你会发现新的模式和反模式，掌握更多的开发工具，并对自己的技能更有信心。关键是要多样化你的实践，探索不同的问题、项目和解决方案。
10. 学习良好的编程模式
作为一名React开发人员，你还应该专注于基础的编程技能：
- 数据结构和算法（例如，集合，映射，递归）。
- 《程序员修炼之道》等书籍中阐述的编程原则。
11. 阅读大量的React代码
构建项目不是学习React的唯一途径，阅读代码同样重要。它可以帮助你掌握新的技巧，并比较不同的问题解决方案。你可以阅读GitHub上的开源项目或你同事的代码。
12. 尽快使用TypeScript
使用TypeScript是一个巨大的改变。之前，你需要花费额外的时间来检查是否传递了正确的属性，并且可能需要花费数小时来调试一个只是传递了错误值（或者更糟，undefined）的错误。使用TypeScript后，你可以专注于构建组件并定义类型，并在错误到达生产环境之前捕获它们。
13. 避免过早的抽象
我以前经常犯这个错误：每当我设计一个简单的组件时，我都会尝试使其可重用和面向未来。问题是，我经常在没有明确需求的情况下创建错误的抽象，导致我以后不得不重构代码，或者不得不忍受笨拙的抽象，使开发变得更加困难。你应该编写一个解决当前问题的组件，仅在有明确的重用需求时才逐渐扩展它。
14. 首先使用React的内置状态管理
你不需要立即使用Redux或Jotai。对于简单的应用程序，React的useState，useReducer和useContext已经足够了。
15. 不要盲目遵循在线建议
几年前，我在网上看到有人说“备忘录化是邪恶的”，所以我停止在我的React应用中使用它。直到我有一个应用程序在生产环境中崩溃了，我才意识到这个建议并不适合我。因为我的用例不同，我需要使用副作用，并且我正在使用大型组件。因此，不要盲目遵循你在网上找到的建议。请与你的团队成员讨论，并评估它是否适用于你的特定情况。
16. 抽出时间进行重构
正如鲍勃·马丁叔叔所说：“当开发人员害怕清理他们看到的糟糕代码时；系统就会开始腐烂。随着腐烂的增加，恐惧也会增加——所以腐烂会加速。在某些时候，代码会变得一团糟，以至于没有一个开发人员可以评估特定更改的影响。添加一个图标可能会破坏其他不相关的东西。”
因此，你需要定期重构你的代码。当你的React组件不再有意义，变得过于复杂或庞大时，请花5-30分钟进行重构。小的、定期的改进可以使你的组件更易于管理并防止出现问题。
17. 仅在必要时使用框架
你不必使用框架来使用React。简单的React，Vite和react-router设置已经足够了。仅当你的应用程序需要其功能时才使用Next.js或Remix等框架。
总而言之，成为一名优秀的React开发者需要不断的学习和实践。希望这些建议能帮助你少走弯路，更加高效地使用React构建出色的应用程序。不要害怕犯错，要从错误中学习，并不断探索新的解决方案。祝你在React开发的道路上越走越远！