选择 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]

相关文章
|
存储 前端开发 JavaScript
React Native 核心技术知识点快速入门
大家好,我是 V 哥。React Native 是 Facebook 开发的开源框架,使用 JavaScript 和 React 构建跨平台移动应用。本文将介绍其核心技术,帮助初学者快速入门。内容涵盖环境搭建、组件(函数与类组件)、Props、State、样式、导航及性能优化等关键知识点。通过实践这些技术,你将能够创建高性能的 iOS 和 Android 应用。关注 V 哥爱编程,一起探索全栈开发之路。
572 0
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
1425 2
|
Rust 前端开发 JavaScript
前端技术新探索:从React到WebAssembly的高效之路
前端技术新探索:从React到WebAssembly的高效之路
573 2
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
916 0
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
前端开发 数据安全/隐私保护
前端技术实战:React Hooks 实现表单验证
【10月更文挑战第1天】前端技术实战:React Hooks 实现表单验证
|
移动开发 前端开发 JavaScript
使用React Native进行跨平台移动开发:技术探索与实践
【8月更文挑战第10天】React Native以其跨平台、高性能、易学习等优势,在移动开发领域取得了显著的成果。通过合理使用React Native,开发者可以更加高效地开发出高质量、低成本的移动应用。然而,在享受React Native带来的便利的同时,我们也需要关注其潜在的挑战和限制,并通过不断学习和实践来提升我们的开发能力。
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
255 1
|
前端开发 JavaScript Android开发
使用React Native开发跨平台移动应用的技术详解
【5月更文挑战第22天】本文详述了使用React Native开发跨平台移动应用的技术,该框架由Facebook推出,基于JavaScript,支持iOS和Android。React Native通过JNI/JSI实现JavaScript到原生代码的转换,提供高效性能和原生体验。其优势包括跨平台性、原生体验、开发速度及社区支持。开发流程涉及环境搭建、项目创建、编码、调试与测试,以及构建与发布。注意事项包括性能优化、平台适配、利用第三方库和持续学习。React Native为开发者构建高质量跨平台应用提供了便捷途径,未来潜力无限。
|
前端开发 Java Spring
Spring与Angular/React/Vue:当后端大佬遇上前端三杰,会擦出怎样的火花?一场技术的盛宴,你准备好了吗?
【8月更文挑战第31天】Spring框架与Angular、React、Vue等前端框架的集成是现代Web应用开发的核心。通过RESTful API、WebSocket及GraphQL等方式,Spring能与前端框架高效互动,提供快速且功能丰富的应用。RESTful API简单有效,适用于基本数据交互;WebSocket支持实时通信,适合聊天应用和数据监控;GraphQL则提供更精确的数据查询能力。开发者可根据需求选择合适的集成方式,提升用户体验和应用功能。
538 0