ReactJS–世界上使用最多的JavaScript框架。实际上不是一个框架.

React是一个开源的JavaScript框架，实际上不是一个框架。但它是目前世界上最常用的前端开发技术。React最初由Facebook开发，现在仍由Facebook维护，并得到活跃的开源社区的支持，实际上是一个JS“库”。

ReactJS负责构建UI组件的层次结构或呈现，并为前端和服务器端提供支持。

与所有JavaScript框架和库一样，React的主要用例是创建动态用户界面，这些界面在客户端（用户）端进行更新。页面不必在浏览器中刷新，而是自动更新。就像Facebook的feed一样。这就是为什么这家社交媒体巨头投资开发自己的JavaScript库，专门为自己的应用程序量身定做。

为什么React是JavaScript框架和库中使用最多的？

React已经成为世界上使用最多的前端JS框架/库，因为它受到软件开发人员和项目发起人的欢迎。对开发应用程序的软件工程师和架构师以及投资于这些应用程序的组织有什么吸引力？

为什么React比其他JS框架和库更受开发者青睐？

ReactJS在开发社区中的流行源于它的灵活性（源于它是一个库而不是框架——我们稍后将更详细地讨论它的区别）、速度和相对可访问的学习曲线。

但是还有一些其他的JavaScript库和框架，开发人员“喜欢”使用的程度几乎相同。2019年的JavaScript状态报告根据开发者的满意度将Svelte 和Vue.js与React一样受欢迎（分别为89%、88%和87%）。

 

尽管事实上，开发人员对Svelte（一个相对较新的框架选项）和Vue.js表现出相似的满意度,React开发人员的需求远远超过那些专门从事JavaScript同行和竞争对手的人。

有更多的React开发人员工作机会

在热门的就业门户网站上怪物网站，截至2020年10月底，React开发者/工程师的空缺职位为7678个，而Vue.js版只有16个角色。打开StackOverFlow.com网站，该公司只发布可用的开发和IT专家职位，目前有520个React职位正在招聘中。为Vue.js版而苗条的开发者则分别有168个和3个职位。

事实上，Monster列出了7260个和StackOverFlow 304个角度工程师的空缺。远不止这两个Vue.js版或者说纤细，在一定程度上，它成为雇主需求量第二大的JS框架/库。尽管Angular在开发者满意度方面只排名第五。

与IT外包提供商一样，在K&C，我们也可以证明，我们收到的来自寻求React支持的组织的咨询比其他任何JavaScript替代方案都要多。

另一方面，一方面，对于开发人员来说，影响给定JavaScript框架或库的流行程度的因素明显不同。另一方面，组织雇佣开发者。在目前“热门”的JS技术选项中，只有React在两个涉众类别中表现出相似的受欢迎程度。

为什么React比其他JS框架和库更受项目发起人的青睐？

雇佣软件开发人员的组织与开发人员本身的优先级略有不同。后者优先考虑他们学习并将给定的JS框架或库应用于前端开发项目的方便程度。如果他们觉得某个特定的选项对他们来说是最方便的，他们会喜欢它。

对于那些为应用程序开发提供资金的组织来说，有更广泛的考虑因素会影响他们的偏好。

技术上灵活，在广泛的用例中表现良好

最低的合格标准是，或者应该是，给定的框架或库在技术上与应用程序的规范相匹配。理想情况下，选择将是灵活的，以满足各种潜在规范的需要。这将允许同一个团队在不同的或所有的雇主申请中工作。

开发商满意度

如果开发人员希望使用编码语言、框架或库，这也是一个很大的优势。这将提高他们的工作满意度，这对生产率和留任率有积极影响。这两者最终都会影响到组织和应用程序的商业案例的底线。

技能差距较小

但是，React是当前最受欢迎的前端开发选择还有其他商业案例原因。一是市场上的React开发人员比其他JS框架/库选项的专家都多。这一点很重要，因为它可以减少招聘的瓶颈，而招聘对于优秀的软件工程师来说绝非易事。

经得起未来考验

一个聪明的项目赞助人会选择尽可能地采用经得起未来考验的技术进行开发。一个软件开发项目的一个关键因素是潜在员工的大量存在。如果雇佣新的团队成员来扩大资源规模，或者替换即将离职的员工，那么这将是一个严重的问题，最终会成为一项直接或间接的开支。工资可能会虚高，或项目延误和/或正在进行的工作中断。

React是软件开发中最能证明未来的技术之一，因为React开发人员有很多。至少与其他选择相比，合格的软件开发人员在需求方面普遍不足。而对React开发者的更大需求创造了一个良性循环。进入劳动力市场的初级开发人员更有可能选择专注于需求更高的技术领域。

React被认为是一种特别适合未来发展的技术还有其他原因。这个图书馆由世界上最大的公司之一Facebook维护。它还拥有一个特别活跃的开源社区，这在一定程度上得益于React开发人员的数量很高。Facebook的支持和庞大的开源社区的结合意味着React正在不断更新和改进，在可预见的未来几乎没有被淘汰的危险。

向后兼容和逐步升级—React 17

React擅长的面向未来的业务关键型软件应用程序的另一个方面是，除了不断改进之外，该库还具有很高的向后兼容性，这意味着最新版本与以前的版本兼容。

事实上，React的最新版本React 17（于2020年10月20日以稳定版本发布），令人惊讶的是没有任何新功能。相反，“垫脚石”版本的重点是使React比以往任何时候都更加向后兼容。React 17实现了这一点，允许应用程序的“逐步更新”。

在React 17之前，升级React应用程序需要将整个应用程序的代码库升级到最新版本。即使这通常比在大多数其他框架中这样做更容易，也不可能在React的最新版本中添加新的特性，而不是用早期版本构建的应用程序。至少不是以一种不脆弱的方式，它经常会导致事件的问题。现在你可以了。

如果一个应用程序是在React 17中构建的，并且在React 18或将来的版本中继续开发，那么就可以迭代地升级应用程序的其余部分——一块一块地升级。这是通过允许应用程序的遗留部分按需延迟加载来实现的。React在Github上有一个渐进升级演示，展示了它的工作原理。

此外，对17项交易与活动授权的反应也有所改变。将不再在文档级别附加事件处理程序。相反，它们被附加到根DOM容器中，在该容器中呈现了React树：

const rootNode = document.getElementById('root');

ReactDOM.render(<App />, rootNode);

 

React 17也会调用

rootNode.addEventListener()

而不是

document.addEventListener()

 

对于大多数事件，就像以前一样。

对于较大的应用程序，则可以通过不主动地对较大的应用程序进行反向和动态升级。

适用范围

当然，React可能不是绝对用于开发每个应用程序的框架或库的最佳选择。它在某些情况下有其局限性，这就是为什么JavaScript开发不是一个React垄断（即使当前的趋势是它成为一个有Angular的双寡头）。但大多数JS应用程序用例都可以使用React很好地处理。

应用范围，React对于大多数JavaScript开发项目来说都是一个不错的选择，这对于雇佣软件开发人员的组织来说是另一个重要的优势。如果对建立React团队做出了战略选择，那么React对于未来的JavaScript项目都不是一个好的选择，这将是一个罕见的例外。

React Native–移动开发直接提升技能

React Native是React的移动开发库，是该技术应用范围的另一个例子。对于React开发人员来说，通过学习React Native来提高自己的技能相对简单。

React中构建基于浏览器的应用程序与React Native中的移动应用程序的主要区别在于，前者使用虚拟DOM在Reactjs中呈现浏览器代码。在后者中，本机api用于在移动设备中呈现组件。代码与不同的环境通信。

否则，剩下的大部分过程都是一样的。如果开发人员熟悉React中的props、render props、components、hoc和lifecycle的模式，那么就可以在React Native中工作了。核心规则是相同的。他们只需要学习如何为Android或iOS环境重定目标，而不是在浏览器上。

React和React Native之间的技能交叉是React对雇主/项目发起人和开发人员的另一个好处。能够同时开发基于浏览器和移动应用程序会使开发人员更有价值、更具多功能性，并增加灵活性，使项目经理的生活更轻松。对于项目发起人来说，所有帮助React的主要优点都是一个实用的选择，而不会影响软件的质量。

简而言之，Affice的流行性的基础在于它既能从赞助商的角度回答应用程序的业务案例，又能回答开发者的偏好。这两者相互促进，巩固了React在框架和库的JavaScript层次结构中的地位。

React-技术分解

从项目发起人和软件开发人员的角度来看，React的商业吸引力归根结底在于库的技术优势。它并没有达到普及的程度，这也证明了它的普及性，因为使用React开发的应用程序在技术上不如Angular开发的应用程序，Vue.js版或者其他主要的JavaScript替代品。

那么，作为JavaScript库，支撑React技术优势的关键技术特性是什么？

Javascript库与Javascript框架：有什么区别？

JavaScript框架（如Angular或Vue.js版)和库（如React）的区别是一个框架它定义了开发人员如何设计应用程序，而库由应用程序可以调用以执行任务的函数组成。框架调用应用程序代码。应用程序调用库的代码。

实际的区别是什么？让我们用一个比喻来说明。如果你想盖房子，你通常有三种选择：

1. 一个完全定制的建筑，从头开始设计。你可以选择卧室是12平方米，还是18平方米，是长方形还是方形。有一些最佳实践规则可以防止开支失控或事情不能像他们可能的那样有效。但除此之外，你完全可以自由定制每一个细节。尤其是在预算问题不大的情况下。这种方法就像用纯JavaScript构建应用程序的前端。
2. 模块化设计，允许不同的元素混合和匹配。您可以在一系列房间大小和形状之间进行选择，并根据您的需要和喜好进行混合和匹配。再次考虑到一些实际情况，如管道和电气。这一选择仍然会留下很多自由，但会大大降低费用和建造时间，因为房屋建造商要么拥有，要么能够订购用于建造可用模块范围的预制构件。这种方法就像使用React这样的库来构建应用程序。
3. 定义的结构，具有定制饰面。如果你从一个房地产开发商那里买了一套房子，而这个开发商先是建造房子，然后再出售（或是在建设期间的某个阶段出售），你可能会在一系列的模型中做出选择。两居室、三居室等，但一个模型的每个示例的基本架构将是相同的。所有房间都在同一个地方，大小相同。你可以做大量的室内定制，这将真正改变一个房子的外观和感觉与另一个完全相同的基本建筑。如果你准备好花这笔钱，你也许可以做一些内部改造，比如推倒墙壁。或者在后面加一个扩展。

您可以轻松定制的仅限于室内设计，但您知道该建筑的实用性已经过可靠性和功能性的路试。很划算。你总可以在几年后再加一个延期。这种方法类似于使用框架构建应用程序。

虚拟DOM提高了动态用户界面的更新速度

React的速度在很大程度上取决于它对虚拟DOM的使用。DOM（documentobjectmodel）是一种编程API，或者是对文档的查看协议（从广义上说就是信息的存储和表示方式），这些文档形成了数据输入和输出。它定义了文档的逻辑结构以及访问和操作文档的方式。

React使用虚拟DOM，它比传统DOM快得多。对于使用传统DOM更新新信息的页面，必须从头到尾重写整个页面，然后进行呈现。如果DOM是虚拟的，那么只需要重写包含更新数据的部分。

可重用组件提高了开发效率

基于组件的特性在JavaScript库和框架中绝非独一无二。大多数，尤其是流行的，都是。但即使基于组件的优势并不能将React与其他选择区分开来，但它仍然值得注意作为一种优势。

组件是逻辑上可分离的单元或代码位，它们组合起来形成一个完整的应用程序。例如，表单字段可以作为应用程序后端表单编辑器中的组件重用，表单编辑器中表单是在实际表单上构建的（因为我们使用服务器端Javascript将表单呈现为html）。

能够在整个应用程序中或在应用程序之间重用相同的组件可以节省开发时间和维护时间，并有助于保持整个应用程序的外观和感觉的一致性。

状态和道具（Props）

状态和属性用于React-to控制组件数据流。Props是父组件传递给React组件的变量。Props扩展功能，然后可以像变量一样在一个函数中使用，从而允许组件得到更广泛的使用。

React状态也是一个变量，但它是由组件直接初始化和管理的。状态和属性中的数据用于用动态数据呈现组件。组件所保存的、影响视图状态的可变内部数据存储在类的state member变量中。

如果组件中的状态发生变化，则会再次自动调用呈现函数，立即显示数据的最新值。事实上，正是React组件状态的这种反应性质量赋予了这个库它的名字。

服务器端呈现

与其他JS框架一样，React也可以通过使用Node.js，显著提高了应用程序的负载和响应时间。

React&React用例——基于JS框架（实际上是一个库）构建的大牌应用程序

当然，Facebook的浏览器和移动应用程序都是基于React的，Facebook旗下的Instagram也是如此。要深入了解其他使用React构建的基于浏览器的大型应用程序，以及基于React Native构建的移动应用程序，请看以下示例：

React应用程序

• Facebook
• Instagram
• Whatsapp (web version)
• Pinterest
• Netflix
• Airbnb
• Cloudflare
• Dropbox
• BBC
• Flipboard
• Imgur
• Postmates
• Reddit
• Paypal




•  

React-Native移动应用程序

• Facebook
• Instagram
• Whatsapp
• Walmart
• SoundCloud Pulse
• Wix
• com
• Bloomberg
• Tesla



 

React框架的缺点-没有什么是完美的

React也有缺点和特性，在特定的环境下可以被视为弱点。开发商和项目发起人经常强调的主要缺点是：

开发时间

React是一个库而不是一个框架，这一事实提供了更大的灵活性和选择。为什么更受欢迎的框架结构往往比它更受欢迎。但硬币的另一面是，从更小的块构建应用程序不可避免地需要更多的时间。您可以使用乐高®创建比DUPLO®更复杂的模型，但这需要更多的时间和精力。

更大的出错空间

小模块为应用程序的组装方式提供了更多选择，也意味着有更多的绳索可供自己使用。权力越大，责任越大。企业级应用程序可以支持框架，因为它们更稳定。移动部件越少，出错的可能性就越小。

React的文档很难跟上它的发展

一些开发人员认为React正在不断更新新特性和工具，这导致了高质量指令文档的缺陷。

JSX

React的另一个特性是它使用了语法扩展JSX。JSX允许JavaScript与HTML混合使用。这有一些优点，比如保护代码不被注入。但一些开发人员认为JSX过于复杂，类似于老式的“意大利面代码”，使掌握React的学习曲线变陡。

搜索引擎优化注意事项

这是一个JavaScript范围内的考虑，不仅限于React。但是，如果现在或将来有任何打算让React应用程序的页面在谷歌的搜索引擎上排名，开发者必须考虑到很多事情，以确保该应用程序对搜索引擎优化（SEO）友好。

绝对没有任何技术原因可以解释为什么React应用不能很好地优化搜索引擎。但这其中也有一些细节需要考虑。要确保React应用程序对搜索引擎友好，需要了解Googlebot如何处理JavaScript。

有关JavaScript应用程序SEO的详细介绍，请关注我们的公众号。

您应该为下一个开发项目选择React吗？

到2020年，React可能是所有JavaScript框架和库中最受欢迎的，由于上面讨论的原因，在可预见的将来这个位置不会受到威胁。但是，如果Reactjs或React Native是您下一个应用程序的正确选择，还是所有应用程序的战略性组织决策，则取决于多种因素—包括技术因素和业务案例。

 

原文：https://kruschecompany.com/react-framework-library/

本文：http://jiagoushi.pro/node/1279

讨论：请加入知识星球【首席架构师圈】或者小号【jiagoushi_pro】或者QQ群【11107777】