大家好，这里是大家的林语冰。本期《前端翻译计划》共享的是深入了解 React JS 框架的状态 ------ 它的优势、短板以及对当今开发者的可靠性。
免责声明
本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考，英文原味版请临幸 The Pros and Cons of Using React Today。
在过去的十年中，React 因辅助整个行业的开发者构建顶尖 UI 的超能力，为大家所熟知。
本文在 2023 年底和 2024 年对 React 进行了深入而平衡的展望。我们将看看它值得称道的优势、明显的短板，以及对当今开发者的可靠性。
让我们先从 React 与众不同的创新功能开始，然后再将注意力转向它给开发者带来的挑战。
React JS 是什么鬼物？
ReactJS 是一个组件筑基的 JS 库，最初由 Facebook 创建，并在十年前发布。该库简化了开发者创建交互式 UI，同时有效管理组件状态。它能够为复杂 App 编写多个组件，而不会丢失它们在浏览器的 DOM（文档对象模型）中的状态，这对一大坨开发者而言是一个明显的福利。
虽然 React 主要是一个用于 Web App 的工具，但其多功能性通过 React Native 扩展到移动 App 开发。这个强大的开源库允许开发 Android、iOS 和 Windows App，展示了 React 跨平台开发的灵活性。
React 生态系统
React 最大的资源之一是其庞大的生态系统，其中充满了第三方库和工具，极大地扩展了其功能。这对于路线规划 App 等复杂项目尤其有利，这些项目通常依赖集成大量外部服务，比如地图 API 和路径算法。
React 的灵活性和与各种第三方服务的兼容性简化了集成过程，允许开发者使用高级功能增强其 App，而不会产生过多的开销。
其核心是基本的库和工具，比如 React Router，用于 SPA（单页应用程序）中的动态路由，确保无缝的 UX（用户体验）过渡。Redux 是一个关键的状态管理工具，它为状态创建了一个中心化 store，使不同的组件能够一致地访问和更新它，这在大型 App 中尤为重要。
React.js：不仅仅是复杂性
虽然 React 在 UI 创建方面表现出色，但在状态管理和 SEO 优化等领域存在不足。幸运的是，更广泛的 JS 生态系统提供了许多工具，这些工具好处多多，比如更简化的状态管理方案、通过 SSR（服务器端渲染）增强的 SEO 和数据库管理。让我们瞄一下 React 若干更突出的集成选项。
对于那些寻求更简单替代方案的人而言，MobX 提供了一种直观的状态管理方案，并且样板更少。此外，Next.js 通过提供 SSR 和 SSG（静态站点生成）解决了客户端渲染 App 的当前 SEO 限制。在开发和测试方面，CRA（Create React App）简化了设置新前端构建管道的过程，使开发者能够立即开始运行，而不会受到配置的困扰。
同时，Storybook 作为一个 UI 开发环境，开发者可以在其中独立可视化其 UI 组件的不同状态。Jest 在单元和快照测试中很受欢迎，它与 React 无缝集成。由 Airbnb 开发的 Enzyme 是一个测试工具，它简化了断言、操作和遍历 React 组件输出的过程。
额外的库和工具进一步丰富了 React 生态系统；Material-UI 和 Ant Design 提供了全面的 UI 框架，可以满足美学和功能要求，而 Axios 则提供了一个 Promise 筑基的 HTTP 客户端来发送 HTTP 请求。React Query 简化了获取、缓存和更新异步数据的过程，React Helmet 有助于管理对文档头的更改，这对于 SPA 中的 SEO 至关重要。
React 与其他技术的集成 ------ 比如后端框架，包括 Node.js 和 Django；状态管理库，比如 Apollo for GraphQL，增强了其灵活性。如今，开发者甚至可以将 PDF 查看器嵌入到网站中，并大大优化 UX。
然而，React 的不断发展要求开发者跟上最新的变化和进步，React 为试图制作高质量、可扩展和可维护的 Web App 的开发者提供的无数解决方案抵消了这一挑战。
React 之利
React 已经将自己确立为构建动态和响应式 Web App 的关键库，原因如下：
组件筑基架构
传统的 JS App 在扩展时经常会遇到状态管理问题。虽然但是，React 提供了复杂的、独立维护的可复用组件，允许开发者在不影响其他页面的情况下更新网页的局部 ------ 确保松耦合和协作功能。
当然，这个概念并不是 React 独有的；举个栗子，Angular 也使用组件作为基本构建块。尽管如此，React 庞大的社区、Meta 的支持和相对丝滑的学习曲线使其成为开发者的最爱。
开发中的增强定制
React 的多功能性在构建针对特定业务需求量身定制的 App 时大放异彩。尤其是其组件筑基架构允许在 App 中无缝组装复杂结构。
举个栗子，在构建集成仪表板时，React 的生态系统有助于将各种模块（比如图表、小部件和实时数据源）集成到一个有凝聚力的 UI 中，使开发者能够打造不仅功能强大，而且直观且具有视觉吸引力的 UX。
这种强大的适应性恰恰凸显了为什么 React 仍然是旨在创建多功能和健壮的 Web App 的开发者的首选。
面向未来的开发者选项
React 面向未来的特性是它为开发者提供的最引人注目的优势之一。React 灵活的架构迎合了当前的 Web 开发需求，同时也无缝地适应了将塑造行业近期的新兴技术。
值得注意的是，机器学习正在向 Web 开发领域取得重大进展，2022 年全球 ML 市场价值已经达到 210 亿美元，这凸显了 React 面向未来的特性以及与此类进步相协调的能力的重要性。
其中一个比较突出的例子是 TensorFlow.js，一个用于图像和模式识别的 ML 库。同样，React 允许集成 ML 驱动的聊天机器人甚至推荐功能。此外，WebAssembly 可以帮助允许用 Rust、Python 或 C++ 编码的 ML 应用程序存在于原生 App 中。
用于状态管理的 Redux
在 SPA 中，多个组件驻留在单个页面上，管理状态和组件间通信很快就会变得具有挑战性 ------ 这正是 Redux for React 的亮点。
作为 React 不可或缺的一部分，它充当"管理器"，确保组件之间的数据流一致且准确，集中状态管理并促进组件自治性，显着提高数据稳定性和 UX。
React 之弊
虽然 React 为不同技能水平的开发者提供了许多优势，但它并非没有各自的缺点，包括以下内容：
- 复杂的概念和高级模式：React 引入了若干高级概念和模式，这些概念和模式一开始可能会让初学者不知所措。要了解 JSX、组件、props、状态管理、生命周期方法和钩子，需要扎实掌握 JS 基础知识。
- 与其他技术的集成复杂性：React 经常与其他工具和技术结合使用------如 Redux、React Router 和各种中间件 ------ 对于新手来说，了解如何将这些技术与 React 集成可能极具挑战。
- 非 JS 开发者的障碍：React 对 JS 的严重依赖对于不精通 JS 的开发者而言可能是一个障碍。虽然 JS 是一种通用且广泛使用的语言，但来自不同编程背景的开发者可能会发现适应 JS 的范式和 React 的使用方式极具挑战。
- 不是一个成熟的框架：React 主要处理 MVC 的"视图"部分，也称为模型视图控制器架构。对于"模型"和"控制器"，需要额外的库，与 Angular 等功能齐全的框架相比，这最终会导致结构化程度较低且可能更加混乱的代码。
- 代码膨胀：React.js 的特点是其大量的库和依赖需求，因其臃肿的 App 而臭名昭著。这种膨胀通常表现为较长的加载时间，尤其是在复杂的项目中。该框架的结构严重依赖其虚拟 DOM，即使是次要功能也需要加载整个库，这大大增加了 App 的数字足迹并降低了其效率。
- 在传统设备和弱网络上的性能下降：React.js App 的性能在较旧的硬件和互联网连接较差的地区往往会下降。这主要是由于框架的客户端渲染模型和密集的 JS 处理。这些因素可能会导致渲染交互式元素的延迟，这在计算能力有限的设备或带宽有限的环境中尤为明显，这会对 UX 产生不利影响。
最终裁决
随着 Web 开发领域的不断发展，React 的灵活性和强大的生态系统使其处于有利地位。它将继续使开发者能够将尖端功能无缝地整合到其 App 中。虽然但是，虽然 React 为开发者提供了很多好处，但它仍然有其缺点。
React 的复杂性和对高级 JS 概念的依赖带来了曲折的学习曲线，尤其是对于新手或尚未精通 JS 的人。它还主要解决了 MVC 架构的"视图"方面，需要额外的工具来进行完整的 App 开发，这可能会导致更复杂和结构化更少的代码库。
尽管存在这些挑战，但庞大而活跃的 React 社区在其持续发展中发挥着至关重要的作用。在可预见的未来，它将继续成为 Web 和移动 App 开发的关键库。
您现在收看的是《前端翻译计划》，学废了的小伙伴可以订阅此专栏合集，我们每天佛系投稿，欢迎持续关注前端生态。谢谢大家的点赞，掰掰~
