王尘宇

做者 | Prayaag Kasundra

译者 | 王强

筹谋 | 李俊辰

转发链接：https://mp.weixin.电话.com/s/Z6Vs0dRHlYq4GuaDGpolfA

想要找出当今更好的前端手艺不是那么简单的工作。今天的 Web 开发市场上涌现了良多手艺，每种手艺都能够满足某种特定的需求。React 就是如许一种手艺，几乎每家公司都在利用它。但是为什么呢？为什么要在你的项目中利用 React？你能够在哪里利用 React.js？通过那篇文章，我们来弄清晰 React.js 的一些用例，并领会若何在你的 Web 应用法式项目中利用它。

GET，SET，REACT！——那是我们 Simform 日常工做和生活中的口头禅。

那个故事始于 2015 年，其时我们的开发人员起头利用 React，后来它渐渐统治了我们的代码库。做为一个前端库，它使我们可以快速构建复杂而强大的产物，并能实现快速迭代。目前，我们已经交付了 100 多个 Web 应用法式，此中的大大都应用都用上了 React。

https://www.simform.com/web-apps-development/

在本文中，我们将讨论 React.js 那个基于 JavaScript 的 UI 库是如何改动 Web 开发行业的。我们将领会它的诸多优势，以及若何在你的下一个应用法式项目中利用它。

让我们起头吧！

React 是如何改动 Web 开发的？

在过去的 20 年中，Web 世界日新月异，手艺栈也今昔非比。越来越多的逻辑从办事端转移到了客户端。

起首，像 Angular 如许的框架降生了，并带来了客户端革命。然后，React.js 成为了万寡注目的焦点，并带回了办事端的革命，改变了多年前的失败测验考试。

我们来看看详细的时间线：

React.js 之前的 Web

回到 2015 年之前的手艺范畴，那时 Web 开发全都是脚本和衬着。那是诸如 HTML 和 CSS 之类的语言统治着前端，而 PHP 统治着后端的时代。

那时的 Web 开发十分容易。我们需要做的就是将静态 HTML 页面放在一些文件夹中，并利用 PHP 衬着。虽然关于网站开发来说，那不算什么奇特和曲不雅的办法，但你也能在客户端和办事器之间成立双向毗连。所有那些都归功于办事端衬着（SSR）。数十年来，我们不断在以那种体例构建 Web 应用法式。但我们没想到的是，像 React.js 如许的 JavaScript 库掀起了网站的革命。

单页应用，JavaScript和React.js 的兴起

自从 JavaScript 革命改写了 Web 开发的规则，我们能用 JS 做的工作比十年前丰硕了许多。

那么带来改动的详细是什么呢？

谜底是：利用客户端 JavaScript 编写 Web 应用。

是的，我们指的是利用 JS 手艺开发单页应用（SPA）。固然有许多 JavaScript 框架能让你编写客户端 JavaScript，但是只要 Angular 那个框架推广了那种办法。

想象一下，通过 JavaScript 获取一些数据，为你的标识表记标帜添加一些属性，然后就搞定了：你已经成立了一个动态网站，同时不会弄乱 PHP 和办事器。

但是，无论那种办法看起来有多么流行，DOM 操做（一种衬着多个组件的办法）的速度仍是比力慢。

轮到 React.js 表态了！

2015 年推出的那个 JavaScript 库使开发人员可以以惊人的速度构建动态 Web 应用法式。

React 次要用来在 Web 或挪动应用法式中衬着视图。它允许开发人员创建相互独立的可重用组件。如许一来，当一个 Web 应用法式的任何一项关键功用瓦解时，剩下的元素仍是能一般工做下去。此外，React 带来了一项称为虚拟 DOM 的超卓特征，使开发人员在更新过程中无需每次都更新整个视图即可实现 SSR。

你问那有什么革命性的变革？

例如，在构建动态前端或 SPA 时，你还希望用客户端路由来确保最末用户的快速导航体验。如今你要实现 SSR，但是其实不想为此影响导航。所幸你仍是能够在客户端利用 React.js 并实现导航。那意味着初始衬着会利用 SSR，然后续的导飞行为会类似 SPA。别的，利用 React 时你不会放弃 SSR；你只是在需要时利用它罢了。

总结一下：React.js 擅长构建动态且令人着迷的 Web 界面，胜过了其他 JavaScript 框架（例如 Angular 和 Ember）。原因是：当用户停止任何交互时，虚拟 DOM 能够在更新组件时不影响界面的其他部门。

在利用基于静态 HTML 的页面 20 多年之后，我们末于能构建可在办事端衬着、快速导航并缩短开发时间的网页了。感激 React！

为什么要利用 React？

如今你已经领会了那个革命性 JS 库的起源，那么接下来就领会一下 React 的优势，以及为什么要在你的 Web 应用法式项目中利用它：

开发人员的入门门槛更低：开发人员次要关心的一个主题，就是要选择容易进修和实现的框架（或库）。关于熟悉 JavaScript 的开发人员而言，React 很容易掌握。因而，若是你有一个十分精通 JavaScript 的开发团队，那么 React.js 就应该是更好的选择。但即使开发人员不领会 JavaScript，React 也能够是很好的入门之选。与 Angular 差别，React 拥有光滑的进修曲线。React 使开发人员能够重用组件：在 React 中，你的应用法式由浩瀚组件构成。抱负情况下，你一起头会构建一些小组件（如按钮、复选框、下拉菜单等），然后围绕那些小组件创建 wrapper 组件。在继续编写更高级此外 wrapper 组件时，你会有一个根组件和几个分层组件。如今工作就很简单了：React 中的每个组件都有本身的逻辑。因而若是你在应用法式中重用按钮组件，做起来是很轻松的。我十分确定，每小我都希望在本身的项目中获得可重用性。如今你晓得哪个库供给它了吧？它供给了一个奇特的笼统层：React 另一个鲜为人知的，与营业相关的益处是它供给了一个优良的笼统层，那意味着最末用户无法拜候复杂的内部组件。你的开发人员只需领会一些根底常识即可，能领会内部功用就更好了。并且，它没有规定任何架构形式，不会锁定在 MVC、MVP 或 MVVM 上。你的开发人员能够自在选择本身认为适宜的体例来设想应用法式的架构。它拥有一个充满活力的开发东西生态系统，已经成立了完美的根底：React 拥有一个丰硕而充满活力的生态系统。开发人员能够找到许多现成的和可自定义的图表、图形、文档东西和其他类型的组件，那些组件让他们能够在更短的时间内，无需破费良多精神就能构建好 Web 应用。那里是一组超卓的 React.js 开发东西和教程，可帮忙开发人员构建优良的产物：https://github.com/enaqx/awesome-react应当利用 React.js 的项目示例

先提一个有趣的事实：React.js 最后是由 Facebook 针对本身的用例开发的，后来它才被开源出来。但是 Facebook 并非独一利用 React 的公司。良多拥有多种营业组合的公司也在利用它。

以下是应当利用 React.js 的一些项目范畴：

仪表板或数据可视化东西

仪表板或数据可视化东西是 React 的更佳用例。关于最末用户来说，可以以一种能够快速理解的格局来理解数据要点长短常需要的。出格是在 BI 和机器进修等用例中更是如斯，数据可视化在那些范畴中尤其重要。

虽然网上有一些现成的 React 仪表板模板可用，但它们的手艺答应受权可能会十分高贵。此外，那些模板十分粗笨，无法无缝集成到 Web 应用法式中。因而我们不建议持久利用它们。

要利用 React 构建一个功用完美的仪表板，你还需要利用其他一些开发东西，例如 Ant.design 或 AirframeReact。

下面我们来领会一下 React 若何帮忙开发人员构建交互式，以至是数据密集的仪表板。

组件的可重用性可提拔开发效率。

利用 React，你能够自在构建独立的、可重用的组件，那些组件能让你的代码模块化且更有层次。那里的思惟是：若是仪表板的组件从一起头就是精心设想的，那么就能够在任何处所复用它们，而无需任何额外的设置。

虚拟 DOM 可确保 UI 快速有效地更新

仪表板或数据可视化页面需要不竭更新组件，以便用户能够实时跟踪数据。好比说，不竭更新的数据图表和通知需要实时且高效地显示在屏幕上。

React 的虚拟 DOM 允许你施行一些伶俐的变通法子，从而实现组件的快速重衬着。要实时高效地显示数据的话那是需要的前提。在那些场景中，React 会找出更新 UI 的更佳办法，你要做的就是通过 API 来供给数据流。它能帮忙开发人员构建出需要大量数据更新的复杂仪表板。

同构 JavaScript 能够快速衬着网页

仪表板凡是会被构建为客户端 SPA。在高度复杂或高负载的 SPA 中，从办事器完全加载所有内容可能需要 3-5 秒。

但是，构建客户端衬着的 SPA 可能会存在一些会招致严峻营业问题的缺陷，例如：

SEO 表示蹩脚：仅在客户端运行的 Web 应用法式无法为爬虫东西供给 HTML。那一般会带来蹩脚的 SEO 表示。若是你的企业依靠天然流量来扩大收入，那么那会是一个严峻的问题。蹩脚的性能：若是仪表板之类的 Web 应用法式依靠客户端 JavaScript 衬着全页 HTML，则在内容完全加载到屏幕上之前，用户必需履历一段空白页的期待时间。它会影响你的应用法式性能，进而影响潜在的收益。可维护性较差：固然对你的企业来说，在最简单的用例上利用客户端衬着可能是很好用的，但有时开发人员会在客户端和办事器之间复造某些应用法式逻辑或视图逻辑。常见的例子包罗日期和货币格局、表单验证和路由逻辑等。它使复杂应用法式的维护工做成为了一场噩梦，当你的所有营业都依赖那个应用时情况会十分蹩脚。

如今有了 React，你就能享遭到同构 JS 的优势了——你能够在仪表板应用法式的办事端和客户端利用不异的代码。因而当网页加载时，React 仍然能够继续衬着组件并在屏幕上显示内容。于是乎，你的 Web 应用法式加载速度就会比合作敌手更快。并且，React 的同构功用可加快开发流程，从而节省大量成本和时间。

理论示例：React Airframe 是一个最小水平的仪表板 Web 应用法式示例。它功用齐备，而且核心功用还能够定造。

它长成那个样子：

社交收集

社交收集应用是另一个常见用例，此中 React.js 做为 UI 库长短常适宜的。

固然纸面上来看，将社交收集应用构建为一个动态网站是很不错的主意，但就连开发专家也会狡辩说那种办法有其固有的缺陷，好比需要持久维护，还有永无行境的 DOM 操做咒骂。举个例子，Facebook 一起头是一个老式的动态网站，后来逐步开展为一个单页面为根底的网站。

React 为社交应用带来了 SPA 的优势。

当动态的社交网站响应一个用户恳求，并加载一个新页面时，若是用户在那时点击任何按钮，SPA 只会有一部门做出更改。好比说，若是用户喜好某个活动，则只要喜好按钮会高亮显示，整个页面其实不会全数刷新。那种办法将节省良多客户端到办事器的恳求，从而提拔应用法式性能。

React 使社交共享和 SEO 受益于 SSR

根本的 SPA 是在客户端衬着的，那意味着内置的.js 文件会在整个页面起头加载之前先下载到阅读器上。尔后，网页内容交由客户端 JavaScript 衬着。当社交媒体爬虫恳求页面生成预览时，页面会回绝 JavaScript 代码，并显示一个页面的纯预览，如下图所示：

如你所见，LinkedIn 无法检索那个帖子的相关信息，如题目和做者等内容，因为预览长短常简单的。那并非衬着 Web 应用的最有效办法。

那么还有其他替代办法吗？当然。

利用 React，你能够自在利用办事端衬着。有了 React SSR，信息能够在办事器上的网页衬着，而不是利用 JavaScript 在你的阅读器上衬着。因为初始衬着是在办事端完成的，因而后续页面将间接从客户端加载。那就是鱼与熊掌兼得咯。

除了社交共享之外，React SSR 还能为你供给搜刮引擎优化的益处。按照几年前谷歌的更新算法，GoogleBot 如今可以索引通过 JavaScript 实现客户端衬着的页面了。但那种办法还没那么完美和可靠。就 SEO 而言，利用 React SSR 仍然是更好的选择。

下面是 React SSR 的工做机造：

一些 SSR 框架能够很好地与 React.js 共同利用，如 Next.js 和 Razzle 等；以至还有 Gatsby，后者是 React 的静态站点生成器。

借助 Websocket，React 使社交收集的实时数据处置愈加轻松。

诸如社交媒体之类的 Web 应用需要实时通知，以连结用户的参与度。那时候，像 Socket.io 如许的手艺就能够与 React 搭配阐扬感化了。

利用 Socket.io，客户端和办事器能够实时彼此通信。简单来说：一旦毗连成立后，客户端和办事器之间就能够起头双向通信，而无需不竭刷新网页。此外，办事器能通过统一毗连从客户端领受实时数据。那连续接中的一部门还能处置其他功用，例如播送到多个套接字、为每个客户端存储数据以及异步 I/O 等。

理论示例：React Social Network 是利用 React.js 构建社交收集的最简单示例。它长那个样子：

电子商务或零售

你能够轻松地将 React.js 用做电商 Web 应用法式中的 UI 库。原因如下：React 为开发人员供给了明白的路子，能够很容易利用原子设想之类的原则来构建可重用组件。那里的要点是：基于 React 的电商应用法式的每个组件都应该相互独立。如许，若是你的 Web 应用呈现了任何单点毛病，开发人员仍然能够让整个应用一般运行，因为其他功用仍是在一般工做的。

以下是一些 React.js 特征的简短介绍，恰是那些特征使其成为构建电子商务或零售商铺的抱负选择：

组件可重用性使 React 的电商代码维护起来更容易

在电商 Web 应用法式中利用 React.js，最关键的益处是组件的可重用性。换句话说，组件构建好之后就能够在 Web 应用中屡次复用，而无需重写代码。代码的可重用性为你节省了时间和金钱，因为你用不着创建新的组件，只需复用已有的组件即可。那还意味着你在构建 Web 应用法式时能够更快、更省钱。

在大型电商组织中，组件的可重用性还能够避免差别团队之间的代码呈现反复。从久远来看，代码的维护工做也会变得更轻松。

React 中的形态办理为电商应用带来了庞大的性能优势

在构建电商之类的 Web 应用法式时，你的应用可能需要处置各类各样的工作，例如库存中有哪些物品，或用户将哪些物品添加到了他的愿望清单中。需要即刻动做或更改组件形态的操做都需要有某种形态。

利用 React.js，你能够办理形态并按照形态衬着差别的成果。以下是一些在 React.js 中定义形态的操做：

你的用户看到了什么（数据）？我们正在获取什么信息？我们向用户显示什么 URL？在页面或购物车中选择了哪些项目？

形态办理是 React.js 的另一个长处，它往往能够提拔性能、效率和内存利用效率。也就是说，若是利用适当，React.js 会为你的电贸易务带来实在的益处。那就是为什么大大都受欢送的电子商务网站（如 AliExpress 和 Alibaba）都利用 React.js 来加强其营业手艺栈的原因所在。

理论示例：构建电商 Web 应用法式时，开发人员凡是能够选择以下两种办法：

从一起头就利用 MEAN、MERN 或 NRG 等出名的手艺栈构建 Web 应用或利用一个独立的 storefront（如 headless 或 reaction commerce），通过 API 毗连电子商务后端。

虽说后一种道路看起来最简单，但从久远来看它有以下缺点：

缺乏自定义才能：那种道路中的电子商务功用都是内置功用，因而几乎没有自定义选项。即便有自定义的时机，你也会被束缚在仅有的几个选项中。初始设置成本：利用 headless 时，你可能需要投入资本来做前端开发和集成。办理多个手艺栈：若是你选择 WordPress 做为 CMS，并将 Magento 或 Moltin 做为电子商务办事层，那就需要办理两个平台了。若是你的电贸易务其实不要做成那么复杂的设想，那就会是很头疼的工作。

那就是为什么我们一般会建议利用相关的手艺栈从头起头构建电商 Web 应用的原因所在。我们以至写了一篇深度文章，讨论若何利用 React.js 构建电子商务应用：

https://www.simform.com/build-ecommerce-app-reactjs/

React shopping cart（https://react-shopping-cart-67954.firebaseapp.com/）是最简单的一个示例，展现了若何利用可重用的 React 组件和 Redux（用于形态办理的库）来构建可扩展的电子商务应用法式。

它长那个样子：

适用于多个行业的单页应用法式

React.js 可用来构建合适任何行业的财产应用法式。单页应用法式与你常见的传统多页应用是纷歧样的。当用户在 SPA 上导航时，他的交互城市留在统一个页面上，不消跳转到全新的页面上。那种体例下，各个网页（在那里也称为视图）一般会在统一个页面中内联加载。

Trello 之类的应用是单页导航的好例子。从手艺上讲，那品种型的导航能够通过称为路由的手艺来实现。好动静是：React 供给了一个名为 React-router 的库，供给了在 SPA 中的路由功用。

理论示例：我们 Simform 十分推崇 React.js，因为它能帮忙我们构建交互式 SPA。我们之前为一家客户网站成立了一个如许的 SPA，那也是我们的骄傲之做：国际冰球结合会（Fédération Internationale de Hockey）须眉世界杯网站。因为那个 Web 应用需要处置复杂的视图，并在此中实现复杂的构造，因而我们同时用上了 SSR 与无头 CMS 前端。

跨平台挪动应用（React Native）

在你的项目中利用 React.js 还有一个额外的益处：那就是 React Native。是的，你能够利用 React Native 为 Android 和 iOS 构建跨平台应用。

举个例子，假设你已经为本身的面包店营业成立了一个网站。过一段时间后，你还能够利用 React Native 来构建一款对应的挪动应用。当然，你或你的开发人员无法重用为 Web 端编写的那些代码。不外你仍是能利用与 Web 端不异的架构和办法来构建挪动应用。听起来挺不错的吧。

利用 React Native 构建的挪动应用的性能更接近原生应用（iOS/Android）。别的，若是你已经在 Web 应用中利用了 React.js，那么晋级到挪动版本会容易得多。也就是说，你能够雇用 React.js 开发人员，然后让他们来构建 React Native 挪动应用。

React.js 还能用在哪里？

当然，我们不克不及在一篇文章中介绍 React.js 的所有用例。那份列表是没有尽头的，但下面列举了一些能够利用 React.js 的 Web 应用场景：

博客（Gatsby）贸易网站做品集论坛评级网站会员网站电子进修模块图片展现自我推广的小我主页职位介绍营业目次Quora 如许的问答网站非营利性网站，用于募捐Wiki 和常识库YouTube 等媒体中心网站拍卖和优惠券网站总结

若是你的项目需要组件可重用性、令人印象深入的用户交互或酷炫的动画，那么 React.js 就会是项目标好辅佐。它是一个强大的 UI 库，可用于构建合适中小型组织，以至是大型组织的项目。那就是为什么会有那么多公司严峻依赖 React 来实现本身持久营业目的的原因所在。在本文中，我们提到了良多详细的 React.js 用例。当你决定在项目中利用它之前，请必然要好好参考那些用例和特征。

React.js 开发常见问题

我需要为 React.js 雇用专门的开发人员，仍是说只要会 JavaScript 的员工就行？

若是你有了一收纯熟的 JavaScript 开发团队，那么利用 React.js 是没有障碍的。React 就是 JS 代码，所以你无需零丁聘用 React.js 开发人员。JavaScript 开发人员能够轻松学会 React.js。

它是一个库仍是一个框架？

React 是一个库。它不克不及处理应用法式级此外任何构造或架构问题。它只是供给了一组更好地处置前端的办法。

React 中的实在 DOM 和虚拟 DOM 有何差别？

DOM（文档对象模子）是网页的面向对象的暗示形式，能够利用诸如 JavaScript 之类的脚本语言来修改。DOM 用节点和对象暗示文档。如许，编程语言就能够毗连到页面上了。利用 DOM，法式员能够构建文档，导航构造，并添加、修改或删除元素和内容。

虚拟 DOM 是 DOM 对象的轻量级副本暗示。React 的虚拟 DOM 的一大优势是，它比其他为 JS 带来响应性的办法更简单。

React 利用单向数据绑定来简化工做。例如，每次你在 React UI 中修改一个输入字段时，它都不会间接更改那个组件的形态，而是会更新数据模子来更新 UI，让你输入的文本显示在输入区域中。

React.js 是前端库吗？

是的。React 是前端开发中利用最普遍的库之一。React 已成为前端的首选，因为它闪开发人员可以利用虚拟阅读器（比实在的阅读器友好得多）来开发。并且，JavaScript 开发人员只需几小时就能入门，因为需要进修的只要一个小 API、一些函数和对应的利用办法罢了。

React.js 能做什么？

React.js 可用于构建多品种型的应用法式，如仪表板或数据可视化东西、单页网站、社交网站、媒体站点、视频平台、电子市场、电子商务和共享经济平台等。

为什么我应该用 React 而不是 Angular？

在前端 Web 开发财产，React 是一款优良的东西。与 Angular 比拟它的优势良多，诸如快速衬着、开发时间较短、进修曲线更平缓，以及办事端衬着等。React 是以 JS 为中心的，因而比 Angular 更间接、专注和一致。

除了上面提到的益处外，React.js 比拟 Angular 还有一些优势：

快速高效十分合适基于组件的 UI单一数据绑定构建块的灵敏性同构 JavaScript大型社区撑持一站式视图和控件可构建大型应用法式

React 有哪些关键特征？

React 16 版的核心特征如下：

新的核心架构Fragements错误鸿沟Portals撑持自定义 DOM 属性改良的办事端衬着减小文件尺寸

谁创建了 React？

Facebook 的开发人员创建 React，是为了给基于 HTML 的 Web 世界带来革命。目前，React 由来自 Instagram 和 Wix 公司的开发人员构成的大型社区维护和奉献。

React（React.js）简介？

React 被定义为一个 JavaScript 库，能够让创建交互式用户界面的过程变得轻松自若。它由 Facebook 的软件工程师 Jordan Walke 创建，并于 2011 年初次摆设在 Facebook 的 NewsFeed 中。它可用于单页或挪动应用法式开发。

它是一个开源和基于组件的前端库。React.js 在 MVC 中是V。那意味着它仅用于应用法式的视图层。

为了更快地完成工做，React 实现了一个虚拟 DOM，它是 JavaScript 中的 DOM 树暗示。React 的核心计心情造是维护一棵树，该树能在各个节点上施行高效的，差别用处的计算。你还能用它在 JavaScript 中重构 DOM，并将现实发作的更改推送到 DOM。

保举React 进修相关文章

《13个精选的React JS框架》

《深切浅出画图讲解React Diff原理【理论】》

《【React深切】React事务机造》

《Vue 3.0 Beta 和React 开发者别离杠上了》

《手把手深切Redux react-redux中间件设想及原理（上）【理论】》

《手把手深切Redux react-redux中间件设想及原理（下）【理论】》

《前端框架用vue仍是react？明晰比照两者差别》

《为了学好 React Hooks, 我解析了 Vue Composition API》

《【React 高级进阶】摸索 store 设想、从零实现 react-redux》

《写React Hooks前必读》

《深切浅出掌握React 与 React Native那两个框架》

《可靠React组件设想的7个原则之SRP》

《React Router v6 新特征及迁徙指南》

《用React Hooks做一个搜刮栏》

《你需要的 React + TypeScript 50 条标准和经历》

《手把手教你绕开React useEffect的陷阱》

《浅析 React / Vue 跨端衬着原理与实现》

《React 开发必需晓得的 34 个技巧【近1W字】》

《三张图详细讲解React组件的生命周期》

《手把手教你深切浅出实现Vue3 & React Hooks新UI Modal弹窗》

《手把手教你搭建一个React TS 项目模板》

《全平台（Vue/React/微信小法式）肆意角度旋图片裁剪组件》

《40行代码把Vue3的响应式集成进React做形态办理》

《手把手教你深切浅出React 利诱的问题点【完好版】》

做者 | Prayaag Kasundra

译者 | 王强

筹谋 | 李俊辰

转发链接：https://mp.weixin.电话.com/s/Z6Vs0dRHlYq4GuaDGpolfA