选择 React 是商业问题而不是技术问题

简介:

image
概要

React 是一个构建可组合的用户界面的工具库。其它类似的有 Angular、Backbone、Knockout 和 Ember,但是相对来说,React 的成长更体现了解决商业问题而不是技术问题。下面我们会讨论为什么 React 很重要,以及它是如何有利于团队工程化的。

规避风险

React 足够稳定 - Facebook 聚集了众多优秀的工程师,并投入了大量资源在 React 项目(Newsfeed,Instagram,Messenger 以及 Ads Marketplace 等)上。这种投入,以及 Facebook 公司自己的产品对 React 的测试,都是其它竞品所不具备的。至少有 571 位(截止 2015 年 12 月份)贡献者参与了 React 的一系列会议以及定期版本的更新。

使用 React 的产品:AirBnB,Asana,Atlassian,BBC,Chegg,CloudFlare,CNN.com,Codecademy,Coursera,Craftsy,Dailymotion,Dropbox,Expedia,Facebook,Feedly,Flipboard,HipChat,IMDb,Imgur,Instagram,Khan Academy,KISSmetrics,Mattermark,Minerva Project,Netflix,OkCupid,Rackspace,Rally Software,Ralph Lauren,Reddit,Redfin,Salesforce,Squarespace,The New York Times,Trunk Club,Twitter,Uber,University of Cincinnati,Venmo,WhatsApp,Wired,Wix,WordPress,Yahoo,Zendesk。

研发效率

健壮的迁移方案 - 不论页面整体是如何构建的,React 都可以在其中的一小块区域落地实现,这样开发者可以以任意节奏进行迁移。需要注意的是 React 需要一个运行时基础库(React v0.14.0 版本大约 gzip 后 39.4kb),因此在旧的基础库被完全移除之前,这种不完整的迁移状态会增加页面资源体积。

性能第一 - React 的设计模式让写出糟糕的代码变得非常困难(对于运行时性能来说,如果明白一部分 React 的工作原理,写出糟糕的代码还是很容易的——译者注)。此外,因为 React 避免了直接操作 DOM,不仅可以替换已有的视图层(Angular、Backbone 或 Ember)逻辑,也可以避免对 jQuery 一类工具的依赖,而 jQuery 往往是编写出大量代码的祸端。

SEO - 搜索引擎优化需要把页面从服务器渲染到浏览器。React 在设计时考虑到了 SEO,除了可以运行在浏览器上之外,通过 Node 也可以运行在服务端。其它的竞品需要大量不稳定的 hack 和众多开发者维护才能达到类似的目的。React 构建起来更简单,降低了维护成本。

增强的代码复用 - React 具备提供高性能和管理完整的组件生命周期的独特能力,显著地增强了开发者的人机工程学特性。通过更简单地创建、分发和使用独立的可复用组件,开发者可以更有效通过抽象公共特征来节约时间。这对像按钮一样的低级元素以及像手风琴一样的高级元素都奏效。

提升开发者效能

减少同级资源的复杂性 - React 把 HTML 和 JavaScript 糅合在了一起,其原理是 HTML 和 JavaScript 总是不可避免地耦合在一起,分离它们仅仅是分离了技术而不是分离关注点。这种思想也可以引申为包含 CSS,通过隔离变量作用域解决了全局命名下的 CSS 开发所遭遇的一连串问题。 详见 Radium 和 React: JavaScript 中的 CSS 。

更快的错误隔离 - Facebook 向浏览器提供了 React 开发者工具,可以调试创建 UI 的组件和数据。

简单可理解的代码:当今大多数工具中,模型(Model) 代表数据,视图(View) 将数据生成为丰富的 UI 和交互。通常模型或视图(例如商城购物车模型)的改变会对其它依赖相同模型的视图产生级联的影响。如果项目足够大,那么这个依赖图谱会变得复杂,以至于修改时不可避免地会产生副作用。

image

提升可测性:组件作为 React 最基本的抽象单元,将数据作为输入,输出 DOM 而不会有其它副作用。避免了 DOM 在使用和创建中的状态发生耦合,组件变得更原子和可测。

团队收益

快速上手 - React 的 API 非常精简。组合式的声明语法和 UI 元素的组件化让新人上手更快 - 特别是应届生以及对前端领域不熟悉的人。

校正:许多人指出 Google 在内部大量使用了 Angular。我的意思不是 Google 一点也没有使用 Angular,只是我不知道 Google 有把 Angular 用在哪一个拥有海量用户的产品中。这个区别很重要,因为只有这种产品才能真正体现出在维护性、可用性以及人机工程学上的水平,对于有兴趣把工具应用于实际产品的人来说也是一个参考和桥梁。

文章转载自 开源中国社区[http://www.oschina.net]

相关文章
|
3月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
303 2
|
3月前
|
Rust 前端开发 JavaScript
前端技术新探索:从React到WebAssembly的高效之路
前端技术新探索:从React到WebAssembly的高效之路
126 1
|
3月前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
3月前
|
前端开发 数据安全/隐私保护
前端技术实战:React Hooks 实现表单验证
【10月更文挑战第1天】前端技术实战:React Hooks 实现表单验证
|
8月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
279 0
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
5月前
|
移动开发 前端开发 JavaScript
使用React Native进行跨平台移动开发:技术探索与实践
【8月更文挑战第10天】React Native以其跨平台、高性能、易学习等优势,在移动开发领域取得了显著的成果。通过合理使用React Native,开发者可以更加高效地开发出高质量、低成本的移动应用。然而,在享受React Native带来的便利的同时,我们也需要关注其潜在的挑战和限制,并通过不断学习和实践来提升我们的开发能力。
|
5月前
|
前端开发 Java Spring
Spring与Angular/React/Vue:当后端大佬遇上前端三杰,会擦出怎样的火花?一场技术的盛宴,你准备好了吗?
【8月更文挑战第31天】Spring框架与Angular、React、Vue等前端框架的集成是现代Web应用开发的核心。通过RESTful API、WebSocket及GraphQL等方式,Spring能与前端框架高效互动,提供快速且功能丰富的应用。RESTful API简单有效,适用于基本数据交互;WebSocket支持实时通信,适合聊天应用和数据监控;GraphQL则提供更精确的数据查询能力。开发者可根据需求选择合适的集成方式,提升用户体验和应用功能。
119 0
|
5月前
|
Java 前端开发 Spring
技术融合新潮流!Vaadin携手Spring Boot、React、Angular,引领Web开发变革,你准备好了吗?
【8月更文挑战第31天】本文探讨了Vaadin与Spring Boot、React及Angular等主流技术栈的最佳融合实践。Vaadin作为现代Java Web框架,与其他技术栈结合能更好地满足复杂应用需求。文中通过示例代码展示了如何在Spring Boot项目中集成Vaadin,以及如何在Vaadin项目中使用React和Angular组件,充分发挥各技术栈的优势,提升开发效率和用户体验。开发者可根据具体需求选择合适的技术组合。
117 0
|
5月前
|
缓存 前端开发 JavaScript
React.memo 与 useMemo 超厉害!深入浅出带你理解记忆化技术,让 React 性能优化更上一层楼!
【8月更文挑战第31天】在React开发中,性能优化至关重要。本文探讨了`React.memo`和`useMemo`两大利器,前者通过避免不必要的组件重渲染提升效率,后者则缓存计算结果,防止重复计算。结合示例代码,文章详细解析了如何运用这两个Hook进行性能优化,并强调了合理选择与谨慎使用的最佳实践,助你轻松掌握高效开发技巧。
141 0
|
5月前
|
前端开发 UED 开发者
React.lazy()与Suspense:实现按需加载的动态组件——深入理解代码分割、提升首屏速度和优化用户体验的关键技术
【8月更文挑战第31天】在现代Web应用中,性能优化至关重要,特别是减少首屏加载时间和提升用户交互体验。React.lazy()和Suspense组件提供了一种优雅的解决方案,允许按需加载组件,仅在需要渲染时加载相应代码块,从而加快页面展示速度。Suspense组件在组件加载期间显示备选内容,确保了平滑的加载过渡。
204 0