React框架发展史

React开源地址:https://facebook.github.io/react/index.html

1.前端发展背景

前端混沌时代
在“前端混沌时代”,页面主要在服务端开发并生成,服务端生成什么页面,浏览器端就展示什么样的页面,这个时代,是多么单纯。

小前端时代
随后进入“小前端时代”,形成了以HTML为骨架,CSS为外貌,JavaScript为交互体验的前端开发模式,在这个时代,出现了Ajax这种划时代意义的技术,让静态网页升级为动态网页,并随着JavaScript的发展,前端能做更加多样的页面。当时出现了jQuery这类JS工具库,主要用来「操作DOM」,「处理数据交互」,至今仍有很多老旧项目依然在使用jQuery。

大前端时代
在小前端时代稳定发展一段时间之后,工程师们开始发现前端「需要呈现的数据量越来越大」,「网页动态交互效果也越来越多」,jQuery这类工具库「越来越频繁操作DOM」,使得应用性能越来越差,页面越来越卡,慢慢前端大佬们开始解决这些问题。

在2009年诞生了NodeJS,将前端带入全新方向,为AngularJS(2009年诞生),React(2011年诞生)和Vuejs(2014年诞生)三大框架的「诞生奠定基础」。这些框架通过一定的分析比较算法,实现同等效果下最小的DOM开销,提高应用性能。前端开发进入“大前端时代”。

全栈前端时代
“大前端时代”之后NodeJS社区蓬勃发展,4G网络也在不断普及发展,很多传统PC网站开始转向手机、平板等移动端设备,开始出现了混合应用技术(Hybrid APP),出现了各种开发框架,如Cordova、React-Native、Weex、Electron等,还有最近比较火的Flutter。

随着TypeScript的出现,和ECMAScript标准日渐完善,「前端开发正在朝着更加全能化」,「多样化和更加细分领域的方向发展」。

2.诞生原因

React是Facebook在2013年开源的一款前端框架,在这之前,Facebook工程师开发一个简单功能时,如下图界面中“小红点”功能:


在导航栏中有“新好友”、“新消息”和“新动态”三个功能按钮,这其实功能挺简单,但却经常出BUG,比如“收到新消息后,新消息的图标上数字没有正确更新”等问题。「他们找寻出现这种问题的深层次原因」,最终总结为两个原因:
「工程师太过关注UI层面的细节操作」;
「应用程序的状态较为分散,无法追踪和维护」。

这里再介绍下React出现的时代背景:
「大量业务逻辑由后端转为前端实现」,即前后端分离;
已有前端框架开发的「复杂应用性能不佳」。

当时由于Ajax技术兴起,大量原来由服务端处理的逻辑,慢慢转移到前端做处理,这也是为了追求更流畅的Web交互体验。后来为了「提升开发效率和应用性能」,开始有很多大型前端框架出现(如:AngularJS),这些框架也让工程师们越来越关注UI层面的操作(如:频繁操作DOM),「应用性能越来越差」,并伴随无法预知的BUG出现,就像前面讲到的Facebook工程师总结的原因之一。

之后Facebook工程师开始打造自己的前端框架,解决前面总结的问题,于是React就诞生啦~

3.基本介绍

Facebook认为MVC无法满足他们的扩展需求,由于他们非常巨大的代码库和庞大的组织,使得MVC很快变得复杂,每当需要添加一项新功能或者特性时,系统的复杂就成级数的增长,致使代码变得脆弱而不可预测,结果导致他们的MVC正在土崩瓦解。认为MVC不适合大规模的应用。当系统中有很多模型和相应的视图时,其复杂度就会迅速扩大,非常难以理解和调试,特别是模型和视图可能存在双向数据流动。

解决这个问题需要“以某种方式组织代码,使其更加可预测”,这通过Flux和React来完成。

Flux是一个系统架构,用于推进应用中的数据单向流动。React是一个JavaScript框架,用于构建“可预期的”和声明式的”Web用户界面”,它已经使Facebook更快地开发Web应用。

ReactJS最开始只是XHP的一个扩展.简单说说XHP,它是Facebook2010年推出的PHP新的书写方式,旨在让前端开发变的更简单,除此之外,它还能防御跨站点脚本攻击(XSS),XSS对于有经验的Web开发人员就再熟悉不过了,它允许用户恶意将代码注入到网页中,是一种常见的Web应用程序的安全漏洞攻击.XHP有Automatic XSS protection的功能,能够很好地规避以上问题.

然而,XHP在创建动态Web应用程序时却出现了问题,比如一旦应用程序state发生了改变,整个程序将会重新render,这必将导致用户失去之前存储在DOM中的所有数据。这让Facebook的AdsOrg团队不得不深思:为什么要重新渲染整个Page,只因为其中一个state的改变?他们及时地意识到这个问题,这样的Web应用程序将对未来的用户体验造成严重的干扰。

2011年,Facebook高级软件工程JordanWalke开始着手解决这个问题:如何让Web应用程序更加高效,更好地提升用户体验。就这样,一个用于构建用户界面的JavaScript库诞生了。

就在当时,Instagram想用React来构建他们的网站,然而,却遇到了很多的问题,比如React跟Facebook的stack联系可谓十分紧密。但他们并没有放弃,反而做了很多的工作,他们希望,今后全世界的开发者都会庆幸有React这么棒的东西

2013年5月,React在美国JSConf开源。自那以后,全世界的开发者都很快地将React投入到了生产环境中,像Trello,Slack,Docker,Airbnb,KhanAcademy,NewYorkTimes这些公司都冲在了前列。

2015年4月,Facebook发布了关于使用React的专利,说:只要不起诉我们专利侵权,我们就免费给你使用该软件。你可以点击这里阅读关于专利的更多内容:https://github.com/facebook/react/blob/master/PATENTS

4.重要版本发布

如下嵌入需要科学上网能力:

点击查看时间线!!!

2010-react最初迹象
FB引入xhp到php代码中,同年开源。Xhp允许创建复合组件,后期引入至react中。

2011-早期原型
JordanWalke创建FaxJs,react的早期原型,支撑了FB的一套搜索组件。

2012-fb新变化
FBAD管理难度加深,FB需要找到更好解决方案,JordanWalke基于原型创建了react。
4月9日,FB收购Instagram,Instagram想使用FB的新技术。基于此,FB受压之下考虑解耦并开源React。这些大部分由PeteHunt完成。
9月8日至12日:TechCrunchDisrupt旧金山峰会上,马克扎克伯格表示:我们最大的错误就是压太多宝在HTML5上了。他承诺FB将会很多提供更好的移动体验。

2013-发布之年
5月29日至31日:JSCONFUS峰会,JordanWalke介绍React,React开始开源。
有趣的是:观众表示质疑。参会的早期框架使用者中大部分人认为React是很大的退步。但React定位于创新者。React的创建者及时意识到错误,决定后续开启React宣传之旅,让他们由质疑转为支持。
6月2日:React接入JSFiddle
7月30日:React和jsx接入RubyOnRails框架
8月19日:React和jsx接入Python应用
9月14日至15日:JSCONFEU大会,PeteHunt发布“重新思考最佳实践”的主旨演讲
12月17日:DavidNolen介绍基于React的OM框架,介绍中解释了React的高级特性,获得一批早期的支持者。文中解释React如何优于其他方案,进一步提高React的认知度。

2014-扩张之年
React逐渐获得了声誉,开始走向潜在用户中的早期使用者。这时候,FB团队需要传达React如何稳定的消息,而不是简单依赖其技术优势。基于这点关注,他们开始转向吸引企业用户,如:Netflix。
2014年早期:#reactjs world tour大会开启,创建社区,开始把质疑者变为支持者。
1月2日:React Developer Tool成为谷歌开发者工具的插件。
2月:21世纪极客编辑器-Atom发布
4月7日至9日:ReactLondon2014大会召开
6月:ReactiveX.io成立
7月13日:React热加载器发布,它是一个可以热加载React组件,同时不丢失state数据的插件。
12月12日:PlanOut,一项用于在线实验的语言发布。
发布的0.5版本中包含一个基于React实现的Planout语言编辑器,引入FB内部使用的完整特性的编译器。

2015-走向稳定
2015年早期:Flipboard发布React Canvas
1月:Netflix表示喜欢React
2015年早期:Airbnb开始使用React
1月28日至29日:Reactjs Conf 2015大会,FB在一次技术演讲中发布了React Native的第一个版本。
2月:发布Relay和GraphQL
3月25日:FB宣布RNIOS开源并提交Github.
6月2日:DanAbramov和AndrewClark发布了Redux
9月2日:ReactDeveloperTools第一个稳定版本发布。
9月14日:RNAndroid发布

2016-引领主流
3月:Mobx发布
2月22日至23日:Reactjs2016大会在旧金山举办,IsaacSalier-Hellendag介绍Draft.js
3月:React Story book发布
6月2日至3日:React欧洲大会举办
7月11日:React的错误代码系统发布
11月:ReactUI工具集Blueprint

2017-改进之年
2017年早期:Airbnb发布开源库ReactSketch.app
4月19日:F82017大会ReactFiber开源
9月:React,Jest,Flow,andImmutable.js更换授权许可
9月26日:React16发布,包含:errorboundaries,portals,fragments和Fiber架构等一系列特性
10月:Netflix移除客户端Reactjs
11月28日:Reactv16.2发布,提供Fragment优化改进

2018-趋于稳定
3月1日-2日:ReactCONF冰岛大会,DanAbramov发表超越React16演讲
3月29日:React16.3.0发布
时至今日,React最新版本为16.13.1,仍在16的大版本中。

5.React核心原理心路历程

首先我们先来看一段js原生代码。

点击查看!

这是一段很简单的代码,用于操作result的增减,
现在,让我们来抽象的看待这个问题,画个图来表示:

不管你使用原生js还是jq都要通过dom提供的API,经历先从页面取到内容,然后经过js操作以后再填回去。
react同学认为这太智障了,虽然简单,但是能不能砍掉上面的步骤(从dom取内容)或下面的步骤(填回内容)呢,从而更简便呢?
于是react同学砍掉了上面的步骤(砍掉下面的步骤不现实,因为js将无法通知页面),直接在js中生成HTML然后自动页面中同步(用虚线表示),然后当数据更新时,react将重新生成一个对象,再自动的去更新原来页面的元素,从而使得页面中的数据也是最新值。
这样一来事情就变得简单了,代码量减少一半,js再也不用去页面中取元素,只需再js中生成填回页面中即可。从来不去取页面中的元素,只去填东西。react就是在这种理念下诞生了。
接下里我们用这种理念重写一次上面的代码。

点击查看!!!

根据上图的操作在页面中加入一个span,然后为了加个按钮(为了简化先在页面中手动增加)。目前代码有点粗糙,但是为了简单明了演示上图的理念。

在js中生成对象插入到页面中
更新数据时,重新在js中生成对象同步更新原来的页面元素
接着我们开始优化一下代码,并把按钮也放入js代码中:

点击查看!!!

但是乍一看这代码还是很傻*,于是我们继续来分三步更层次优化代码。

这个React.creatElement方法名字太长了,抽出!
这些个变量只用过一次,那我们就可以跳过声明变量,直接使用
于是代码就变成了这个样子:

具有一双慧眼的你,应该也看的出来这样的代码很像一种东西把…

这也就是react最聪明的一点优化,


我们惊讶的发现,这样的js代码和HTML标签上并没有什么区别,
于是聪明的react同学诞生了另一个想法(JSX),我们能不能让用户写下面的代码,然后经过程序转换成上面的代码呢?
这样一来,最终的结果就是我们通过写下面的代码来替换(也就是等价于)上面的代码。
经过react同学一番折腾,JSX语法上线了(敲黑板,重点:我们并不是在写HTML代码,而是用HTML的形式来写JS代码)

Finally,代码变成了这样子(react最终的样子)

点击查看!!!

PS
1. 我们改变过后的类似HTML代码就是虚拟DOM
2. 为什么我们在写JSX的时候,绑定事件的时候函数名后面不带括号,因为在一开始的时候我们在js中写的是对象{onClick:fn},这里需要的fn是整个函数,如果写成{onClick:fn()},赋值给onClick的就是函数的返回值。

6.6个React亮点

Virtual Document Object Model
为了搞清楚这个,我们假设有一个对象,它有很多个属性,然后,我们去修改其中的一个属性的值,这时,React Virtual Document Object Model的高效Diff算法就起作用了,它会首先快速识别出哪些属性发生了改变,而且它将这个过程的复杂度控制在了O(n),接下来就是非常了不起的reconciliation操作,它只会对界面上真正发生变化的部分进行实际的DOM操作,而不是整个DOM,这让我们可以无需担心性能问题而毫无顾忌的随时刷新整个页面了,就问屌不屌.

Server-Side Rendering
React可以很优雅地实现Server-Side Rendering.即当用户向应用程序发送请求时,服务器会将其所需要的组件渲染成HTML字符串,然后把它返回给浏览器,之后,浏览器直接解析HTML就行.这样不仅缩短了响应时间,提升了用户体验,而且有利于SEO,最后,还给开发者带来了组件式开发和代码同构的便利.

React Native
React Native于2015年发布.它支持开发者用JavaScipt和React构建真正native的Android和iOS应用.这样,我们就不需要再去拼命地学习Java和Objective-C了.

React VR
ReactVR在最近的F8DeveloperConference上发布.它允许用户只用JavaScipt就能构建virtualreality(VR)应用.ReactVR还能用WebGL和WebVR给用户带来完美的VR体验.最后,跟React一样,开发者也可以采用声明组件的方式.

React Fiber
React Fiber将在React16中闪亮登场,最初于2016年7月公开发布,它是Facebook开发的一个全新的架构,不仅包含新的协调引擎,而且提供了可串联使用的全新渲染器.该架构可向后兼容,彻底重写了React的协调(Reconciliation)算法,蕴含着过去多年来Facebook不断改进的工作成果.你可以访问该链接跟进发布.

React Primitives
react-primitives是LelandRichardson创建的一个库.该库提供了一套理想的primitives让不同平台中的React应用程序都可以使用.

参考文章:
https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/
TheevolutionofReact(FISAYOAFOLAYAN)http://t.cn/R9XYOF5
https://blog.csdn.net/hhthwx/article/details/80071056
https://zhuanlan.zhihu.com/p/159472034
https://www.jianshu.com/p/bf26262be4f2

欢迎关注我的微信公众号:

 

如无特殊说明,文章均为本站原创,转载请注明出处!

发表评论

电子邮件地址不会被公开。 必填项已用*标注