Nowadays, users expect sleek, performant web applications that behave more and more like native apps. Techniques have been devised to decrease the waiting time for a website to load on a user’s first visit. However, in web applications that expose a lot of interactivity, the time elapsing between a user action taking place and the app’s response is also important. Native apps feel snappy, and web apps are expected to behave the same, even on less than ideal internet connections.
如今，用户期望时尚，高性能的Web应用程序的行为越来越像本机应用程序。 已经设计出了减少网站等待用户首次访问的等待时间的技术。 但是，在暴露出很多交互性的Web应用程序中，发生用户操作与应用程序响应之间所经过的时间也很重要。 本机应用程序看起来很活泼，即使没有理想的Internet连接，Web应用程序的行为也一样。
A number of modern JavaScript frameworks have sprung up that can be very effective at tackling this problem. React can be safely considered among the most popular and robust JavaScript libraries you can use to create fast, interactive user interfaces for web apps.
已经涌现出许多现代JavaScript框架，它们可以非常有效地解决这个问题。 可以肯定地将React视为最受欢迎和最强大JavaScript库之一，您可以使用它们来为Web应用程序创建快速，交互式的用户界面。
In this article, I’m going to talk about what React is good at and what makes it work, which should provide you with some context to help you decide if this library could be a good fit for your next project.
在本文中，我将讨论React擅长的方面以及使它起作用的地方，这应该为您提供一些上下文，以帮助您确定该库是否适合您的下一个项目。
什么是React？ (What Is React?)
React is a Facebook creation which simply labels itself as being a JavaScript library for building user interfaces
.
React是Facebook的一项创新，简单地将其自身标记为用于构建用户界面JavaScript库
。
It’s an open-source project which, to date, has raked in over 74,000 stars on GitHub.
这是一个开源项目，到目前为止，在GitHub上已经赢得了74,000多颗星。
React is:
React是：
Declarative: you only need to design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
声明性的 ：您只需要为应用程序中的每个状态设计简单的视图，当数据发生更改时，React将有效地更新和呈现正确的组件。
Component-based: you create your React-powered apps by assembling a number of encapsulated components, each managing its own state.
基于组件 ：通过组装许多封装的组件来创建基于 React的应用程序，每个组件管理自己的状态。
Learn Once, Write Anywhere: React is not a full-blown framework; it’s just a library for rendering views.
学习一次，随处编写 ：React不是一个成熟的框架；它是一个成熟的框架。 它只是一个用于渲染视图的库。
虚拟DOM如何工作？ (How Does the Virtual DOM Work?)
The Virtual DOM is at the core of what makes React fast at rendering user interface elements and their changes. Let’s look closer into its mechanism.
虚拟DOM是使React快速呈现用户界面元素及其更改的核心。 让我们仔细研究一下它的机制。
The HTML Document Object Model or DOM is a
HTML文档对象模型或DOM是
programming interface for HTML and XML documents. … The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Essentially, it connects web pages to scripts or programming languages. — MDN
HTML和XML文档的编程接口。 …DOM将文档表示为具有属性和方法的结构化的节点和对象组。 本质上，它将网页连接到脚本或编程语言。 — MDN
Whenever you want to change any part of a web page programmatically, you need to modify the DOM. Depending on the complexity and size of the document, traversing the DOM and updating it could take longer than users might be prepared to accept, especially if you take into account the work browsers need to do when something in the DOM changes. In fact, every time the DOM gets updated, browsers need to recalculate the CSS and carry out layout and repaint operations on the web page.
每当您要以编程方式更改网页的任何部分时，都需要修改DOM。 根据文档的复杂性和大小，遍历DOM和更新它可能比用户准备接受的时间更长，尤其是考虑到当DOM中的某些内容发生变化时浏览器需要做的工作。 实际上，每次更新DOM时，浏览器都需要重新计算CSS并在网页上执行布局和重新绘制操作。
React enables developers to make changes to the web page without having to deal directly with the DOM. This is done via the Virtual DOM.
React使开发人员无需直接处理DOM就可以更改网页。 这是通过Virtual DOM完成的。
The Virtual DOM is a lightweight, abstract model of the DOM. React uses the render method to create a node tree from React components and updates this tree in response to changes in the data model resulting from actions.
虚拟DOM是DOM的轻量级抽象模型。 React使用render方法从React组件创建节点树，并响应因操作而导致的数据模型更改来更新此树。
Each time there are changes to the underlying data in a React app, React creates a new Virtual DOM representation of the user interface.
每当React应用程序中的基础数据发生更改时，React都会创建用户界面的新Virtual DOM表示形式。
使用虚拟DOM更新UI更改 (Updating UI Changes with the Virtual DOM)
When it comes to updating the browser’s DOM, React roughly follows the steps below:
在更新浏览器的DOM时，React大致遵循以下步骤：
- Whenever something changes, React re-renders the entire UI in a Virtual DOM representation. 每当发生任何变化时，React都会以虚拟DOM表示形式重新呈现整个UI。
- React then calculates the difference between the previous Virtual DOM representation and the new one. 然后，React计算先前的虚拟DOM表示和新的虚拟DOM表示之间的差异。
- Finally, React patches up the real DOM with what has actually changed. If nothing has changed, React won’t be dealing with the HTML DOM at all. 最后，React用实际发生的变化修补了真正的DOM。 如果没有任何变化，React将根本不会处理HTML DOM。
One would think that such a process, which involves keeping two representations of the Virtual DOM in memory and comparing them, could be slower than dealing directly with the actual DOM. This is where efficient diff algorithms, batching DOM read/write operations, and limiting DOM changes to the bare minimum necessary, make using React and its Virtual DOM a great choice for building performant apps.
有人会认为，这种过程涉及将虚拟DOM的两种表示形式保留在内存中并进行比较，这可能比直接处理实际DOM慢。 在这里，高效的差异算法，批处理DOM读/写操作以及将DOM更改限制在最低限度内，这使得使用React及其虚拟DOM成为构建高性能应用程序的绝佳选择。
React是否适合每个项目？ (Is React Good for Every Project?)
As the name itself suggests, React is great at making super reactive user interfaces — that is, UIs that are very quick at responding to events and consequent data changes. This comment about the name React made by Jordan Walke, engineer at Facebook, is illuminating:
顾名思义，React非常擅长创建超级React式用户界面，即，UI对事件和随之而来的数据更改做出快速响应的界面。 Facebook工程师Jordan Walke对React这个名字的评论有启发性：
This API reacts to any state or property changes, and works with data of any form (as deeply structured as the graph itself) so I think the name is fitting. — Vjeux, “Our First 50,000 Stars“
该API对任何状态或属性更改做出React，并可以处理任何形式的数据(与图本身一样深层次的结构)，因此我认为该名称很合适。 — Vjeux，“ 我们的前50,000星 ”
Although some would argue that all projects need React, I think it’s uncontroversial to say that React would be a great fit for web apps where you need to keep a complex, interactive UI in sync with frequent changes in the underlying data model.
尽管有些人认为所有项目都需要React ，但我认为React非常适合Web应用程序是毫无争议的，在Web应用程序中，您需要保持复杂的交互式UI与基础数据模型的频繁更改同步。
React is designed to deal with stateful components in an efficient way (which doesn’t mean devs don’t need to optimize their code). So projects that would benefit from this capability can be considered good candidates for React.
React旨在以一种有效的方式处理有状态组件(这并不意味着开发人员不需要优化其代码)。 因此，将从该功能中受益的项目可以被认为是React的良好候选者。
Chris Coyier outlines the following, interrelated situations when reaching for React makes sense, which I tend to go along with:
克里斯·科耶尔(Chris Coyier)概述了以下一些相互联系的情况，在达到React的意义时 ，我倾向于这样做：
Lots of state management and DOM manipulation. That is, enabling and disabling buttons, making links active, changing input values, closing and expanding menus, etc. In this kind of project, React makes managing stateful components faster and easier. As Michael Jackson, co-author of React Router, aptly put it in a Tweet:
许多状态管理和DOM操作 。 也就是说，启用和禁用按钮，激活链接，更改输入值，关闭和扩展菜单等。在这种项目中，React使状态状态组件的管理变得更快，更容易。 正如React Router的合著者Michael Jackson恰当地将其放在推文中 ：
Point is, React takes care of the hard part of figuring out what changes actually need to happen to the DOM, not me. That’s *invaluable*
重点是，React负责解决DOM实际需要发生的困难部分，而不是我。 这是“无价之宝”
Fighting spaghetti. Keeping track of complex state by directly modifying the DOM could lead to spaghetti code, at least if extra attention isn’t paid to code organization and structure.
打意大利面 。 通过直接修改DOM来跟踪复杂状态可能会导致产生意粉代码，至少在没有对代码的组织和结构给予更多关注的情况下。
资源资源 (Resources)
If you’re curious about how React and its Virtual DOM work, here’s where you can learn more:
如果您对React及其虚拟DOM的工作方式感到好奇，可以在这里了解更多信息：
Learn React with SitePoint’s comprehensive React hub.
通过SitePoint的综合React中心了解React 。
“The Real Benefits of the Virtual DOM in React.js“, by Chris Minnick
“ React.js中虚拟DOM的真正好处 ”，作者Chris Minnick
“The difference between Virtual DOM and DOM“, by Bartosz Krajka
“ 虚拟DOM和DOM之间的区别 ”，作者Bartosz Krajka
“React is Slow, React is Fast: Optimizing React Apps in Practice“, by François Zaninotto
FrançoisZaninotto撰写的“ React速度慢，React速度快：在实践中优化React应用程序 ”
“How to Choose the Right Front-end Framework for Your Company“, by Chris Lienert
克里斯·利纳特(Chris Lienert)的“ 如何为您的公司选择合适的前端框架 ”
结论 (Conclusion)
React and other similar JavaScript libraries ease the development of snappy, event-driven user interfaces that are fast at responding to state changes. One underlying goal can be identified in the desire to bridge the gap between web apps and native apps: users expect web apps to feel smooth and seamless like native apps.
React和其他类似JavaScript库简化了快速响应状态变化的，事件驱动的快速用户界面的开发。 弥合Web应用程序与本机应用程序之间的差距的愿望可以确定一个基本目标：用户希望Web应用程序像本机应用程序一样流畅，无缝。
This is the direction towards which modern web development is heading. It’s not by chance that the latest update of Create React App, a project that makes possible the creation of React apps with zero configuration, has shipped with the functionality of creating progressive web apps (PWAs) by default. These are apps that leverage service workers and offline-first caching to minimize latency and make web apps work offline.
这就是现代Web开发的方向。 并非偶然的是， Create React App的最新更新是一个默认情况下可以创建渐进式Web应用程序(PWA)的功能，该项目使使用零配置创建React应用程序成为可能。 这些应用程序利用服务人员和脱机优先缓存来最大程度地减少延迟并使Web应用程序脱机工作。
We’ve teamed up with Open SourceCraft to bring you 6 Pro Tips from React Developers. For more open source content, check out Open SourceCraft.
我们已经与Open SourceCraft合作，为您带来了来自React Developers的6个专业提示 。 有关更多开源内容，请查看Open SourceCraft 。
翻译自: https://www.sitepoint.com/react-fast-interactive-user-interfaces/
846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
