React框架发展史
内容
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这些公司都冲在了前列。
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接⼊JSFiddle7⽉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 Canvas1⽉：Netflix表⽰喜欢React2015年早期:Airb
nb开始使⽤React1⽉28⽇⾄29⽇：Reactjs Conf 2015⼤会，FB在⼀次技术演讲中发布了React Native的第⼀个版本。2⽉：发布Relay和GraphQL3⽉25⽇：FB 宣布RNIOS开源并提交Github.6⽉2⽇：DanAbramov和AndrewClark发布了Redux9⽉2⽇：ReactDeveloperTools第⼀个稳定版本发布。9⽉14⽇：RNAndroid发布
2016-引领主流3⽉：Mobx发布2⽉22⽇⾄23⽇：Reactjs2016⼤会在旧⾦⼭举办，IsaacSalier-Hellendag介绍Draft.js3⽉：React Story book发布6⽉2⽇⾄3⽇：React欧洲⼤会举办7⽉11⽇：React的错误代码系统发布11⽉：ReactUI⼯具集Blueprint
2017-改进之年2017年早期：Airbnb发布开源库ReactSketch.app4⽉19⽇：F82017⼤会ReactFiber开源9⽉：
React,Jest,Flow,andImmutable.js更换授权许可9⽉26⽇：React16发布，包含:errorboundaries,portals,fragments和Fiber架构等⼀系列特性10⽉：Netflix移除客户端Reactjs11⽉28⽇：Reactv16.2发布，提供Fragment优化改进
2018-趋于稳定3⽉1⽇-2⽇：ReactCONF冰岛⼤会，DanAbramov发表超越React16演讲3⽉29⽇:React16.3.0发布时⾄今⽇，React 最新版本为16.13.1，仍在16的⼤版本中。
5.6个React亮点react native
Virtual Document Object Model为了搞清楚这个，我们假设有⼀个对象，它有很多个属性，然后，我们去修改其中的⼀个属性的值，这时,React Virtual Document Object Model的⾼效Diff算法就起作⽤了，它会⾸先快速识别出哪些属性发⽣了改变,⽽且它将这个过程的复杂度控制在了O（n），接下来就是⾮常了不起的reconciliation操作，它只会对界⾯上真正发⽣变化的部分进⾏实际的DOM操作,⽽不是整个DOM，这让我们可以⽆需担⼼性能问题⽽毫⽆顾忌的随时刷新整个页⾯了，就问屌不屌.
Server-Side RenderingReact可以很优雅地实现Server-Side Rendering.即当⽤户向应⽤程序发送请求时，服务器会将其所需要的组件渲染成HTML字符串，然后把它返回给浏览器，之后，浏览器直接解析HTML就⾏.这样不仅缩短了响应时间，提升了⽤户体验,⽽且有利于SEO，最后，还给开发者带来了组件式开发和代码同构的便利.
React NativeReact Native于2015年发布.它⽀持开发者⽤JavaScipt和React构建真正native的Android和iOS应⽤.这样，我们就不需要再去拼命地学习Java和Objective-C了.
React VRReactVR在最近的F8DeveloperConference上发布.它允许⽤户只⽤JavaScipt就能构建virtualreality(VR)应⽤.ReactVR还能⽤WebGL和WebVR给⽤户带来完美的VR体验.最后，跟React⼀样，开发者也可以采⽤声明组件的⽅式.
React FiberReact Fiber将在React16中闪亮登场，最初于2016年7⽉公开发布，它是Facebook开发的
⼀个全新的架构，不仅包含新的协调引擎，⽽且提供了可串联使⽤的全新渲染器.该架构可向后兼容，彻底重写了React的协调（Reconciliation）算法，蕴含着过去多年来Facebook不断改进的⼯作成果.你可以访问该链接跟进发布.
React Primitivesreact-primitives是LelandRichardson创建的⼀个库.该库提供了⼀套理想的primitives让不同平台中的React应⽤程序都可以使⽤.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。