如何判斷React是否最适合您的下一個項目

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 。

• React Videos from Facebook Engineers

  React來自Facebook工程師的視訊

• “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/