什么是React？ (What is React?)

React.js often referred to as React or ReactJS is a JavaScript library responsible for building a hierarchy of UI components or in other words, React.js is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps(React Native). React also allows us to create reusable UI components. React was first created by Jordan Walke, a software engineer working for Facebook.

React.js通常被稱為React或ReactJS是一個JavaScript庫，負責構建UI組件的層次結構，換句話說，React.js用于構建專門用于單頁面應用程序的用戶界面。 它用于處理Web和移動應用程序的視圖層(React Native)。 React還允許我們創建可重用的UI組件。 React最初是由Facebook的軟件工程師Jordan Walke創建的。

React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. There are also Javascript frameworks such as Angular, Vue, Nodejs, Ember.js, Blackbone.js and etc…

React允許開發人員創建可以更改數據的大型Web應用程序，而無需重新加載頁面。 React的主要目的是快速，可擴展和簡單。 還有Javascript框架，例如Angular ， Vue，Nodejs，Ember.js，Blackbone.js等。

Also, I want to talk about Components. What are the Components?

另外，我想談談組件。 有哪些成分 ？

Components are the building blocks of any React app and a typical React app will have many of these. Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.

組件是任何React應用程序的構建塊，典型的React應用程序將具有許多這樣的組件。 簡而言之，組件是一個JavaScript類或函數，可以選擇性地接受輸入，即properties(props)并返回一個React元素，該元素描述應如何顯示UI(用戶界面)的一部分。

In the below image consist of some components, for example FindFriendsComponent, FindFriendsListComponent, ButtonComponent.

在下圖中，這些組件由一些組件組成，例如FindFriendsComponent，FindFriendsListComponent和ButtonComponent 。

Your first component

您的第一個組件

const Greeting = () => <h1>Hello World!</h1>;

This is a functional component (called Greeting) written using ES6’s arrow function syntax that takes no props and returns an H1 tag with the text “Hello World today!”

這是使用ES6的箭頭函數語法編寫的功能組件 (稱為Greeting)，該組件不需要任何道具，并返回帶有文本“ Hello World today！”的H1標簽。

Components come in two types, Class components and Function components.

組件有兩種類型， 類組件和功能組件。

Functional (Stateless) Component

功能(無狀態)組件

These components are purely presentational and are simply represented by a function that optionally takes props and returns a React element to be rendered to the page.

這些組件純粹是表示性的，并簡單地由一個函數表示，該函數可以選擇使用props并將返回的React元素返回到頁面。

Generally, it is preferred to use functional components whenever possible because of their predictability and conciseness. Since, they are purely presentational, their output is always the same given the same props.

通常，由于功能組件的可預測性和簡潔性，因此最好盡可能使用功能組件。 由于它們純粹是呈現性的，因此給定相同的道具，其輸出總是相同的。

You may find functional components referred to as stateless, dumb or presentational in other literature. All these names are derived from the simple nature that functional components take on.

在其他文獻中，您可能會發現功能組件被稱為無狀態 ， 啞或表示形式 。 所有這些名稱均源自功能組件所具有的簡單性質。

==> Functional because they are basically functions

==> 功能性的，因為它們基本上是功能性的

==> Stateless because they do not hold and/or manage state

==> 無狀態，因為它們不持有和/或管理狀態

==> Presentational because all they do is output UI elements

==> 演示性的，因為它們所做的只是輸出UI元素

A functional component in it’s simplest form looks something like this:

最簡單形式的功能組件如下所示：

const Greeting = () => <h1>Hi, I’m Functional component!</h1>;

Class (Stateful) Component

類(有狀態)組件

These components are created using ES6’s class syntax. They have some additional features such as the ability to contain logic (for example methods that handle onClick events), local state and other capabilities.

這些組件是使用ES6的類語法創建的。 它們具有一些其他功能，例如包含邏輯的能力(例如，處理onClick事件的方法)，本地狀態和其他功能。

As you explore other resources, you might find class components referred to as smart, container or stateful components.

當您探索其他資源時，您可能會發現稱為smart ， container或有狀態組件的類組件。

==> Class because they are basically classes

==> 類，因為它們基本上是類

==> Smart because they can contain logic

==> 聰明，因為它們可以包含邏輯

==> Stateful because they can hold and/or manage local state

==> 有狀態的，因為他們可以持有和/或管理本地狀態

A class component in its simplest form:

最簡單形式的類組件：

class Greeting extends React.Component {render(){return <h1>Hi, I’m a Class component!</h1>;
}
}

How do I choose which component type to use?

如何選擇要使用的組件類型？

Use a class component if you:

如果滿足以下條件，請使用類組件：

==> need to manage local state

==>需要管理本地狀態

==> need to add lifecycle methods to your component

==>需要向組件添加生命周期方法

==> need to add logic for event handlers

==>需要為事件處理程序添加邏輯

Otherwise, always use a functional component.

否則，請始終使用功能組件。

In addition to providing reusable React library code (saving development time and cutting down on the chance for coding errors), React comes with two key features that add to its appeal for JavaScript developers:

除了提供可重用的React庫代碼(節省開發時間并減少編碼錯誤的機會)之外，React還具有兩個關鍵特性，這些特性對JavaScript開發人員更具吸引力：

-JSX

-JSX

-Virtual DOM

-虛擬DOM

Firstly, let’s talk about JSX. What is JSX?

首先，讓我們談談JSX。 什么是JSX？

What is JSX?

什么是JSX？

JSX (short for JavaScript eXtension) is a React extension that makes it easy for web developers to modify their DOM by using simple, HTML-style code. And — since React JS browser support extends to all modern web browsers — JSX is compatible with any browser platform you might be working with. You are not required to use JSX, but JSX makes it easier to write React applications.

JSX(JavaScript eXtension的縮寫)是一種React擴展，使Web開發人員可以使用簡單HTML樣式的代碼輕松修改其DOM。 并且-由于React JS瀏覽器支持已擴展到所有現代Web瀏覽器-JSX與您可能使用的任何瀏覽器平臺兼容。 您不需要使用JSX，但是JSX使編寫React應用程序變得更加容易。

Let us demonstrate with two examples, the first uses JSX and the second does not:

讓我們通過兩個示例進行演示，第一個示例使用JSX，第二個示例不使用：

Example 1->JSX:

示例1-> JSX：

const myelement = <h1>JSX is very good!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));

Example 2->Without JSX:

示例2->沒有JSX：

const myelement = React.createElement('h1', {}, 'I do not use JSX!');
ReactDOM.render(myelement, document.getElementById('root'));

As you can see in the first example, JSX allows us to write HTML directly within the JavaScript code.So,we can say JSX is easily and understanding than without JSX.

在第一個示例中可以看到，JSX允許我們直接在JavaScript代碼中編寫HTML。因此，可以說，與沒有JSX相比，JSX更容易理解。

Another Example: JSX:

另一個示例：JSX：

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

Secondly, let’s talk about Virtual DOM.

其次，讓我們談談虛擬DOM。

What is Virtual DOM?

什么是虛擬DOM？

If you’re not using React JS (and JSX), your website will use HTML to update its DOM (the process that makes things “change” on screen without a user having to manually refresh a page). This works fine for simple, static websites, but for dynamic websites that involve heavy user interaction it can become a problem (since the entire DOM needs to reload every time the user clicks a feature calling for a page refresh).

如果您不使用React JS(和JSX)，則您的網站將使用HTML更新其DOM(該過程使事情在屏幕上“發生變化”，而無需用戶手動刷新頁面)。 這對于簡單的靜態網站來說效果很好，但是對于涉及大量用戶交互的動態網站來說，這可能會成為一個問題(因為每次用戶單擊要求刷新頁面的功能時，整個DOM都需要重新加載)。

However, if a developer uses JSX to manipulate and update its DOM, React JS creates something called a Virtual DOM. The Virtual DOM (like the name implies) is a copy of the site’s DOM, and React JS uses this copy to see what parts of the actual DOM need to change when an event happens (like a user clicking a button).

但是，如果開發人員使用JSX來操縱和更新其DOM，則React JS會創建一個稱為虛擬DOM的東西。 虛擬DOM(如名稱所示)是站點DOM的副本，React JS使用該副本來查看事件發生時(例如用戶單擊按鈕)需要更改實際 DOM的哪些部分。

Which companies use React?

哪些公司使用React？

There are many big companies which use React, for instance Facebok, ?nstagram, Netflix, Pinterest, Uber, Udemy, Shopify and etc……

有許多使用React的大公司，例如Facebok，?nstagram，Netflix，Pinterest，Uber，Udemy，Shopify等……

為什么要使用React？ (Why to use React?)

Now, the main question arises in front of us is why one should use React. There are so many open-source platforms for making the front-end web application development easier, like Angular. Let us take a quick look on the benefits of React over other competitive technologies or frameworks.

現在，擺在我們面前的主要問題是為什么要使用React。 像Angular一樣，有許多開源平臺可簡化前端Web應用程序的開發。 讓我們快速了解一下React與其他競爭技術或框架相比的優勢。

Easy to learn

簡單易學

Anyone with a basic previous knowledge in programming can easily understand than other framework or libraries. To react, you just need basic knowledge of CSS and HTML.

任何具有編程方面基礎知識的人都可以比其他框架或庫更容易理解。 要做出React，您只需要CSS和HTML的基本知識。

2. Simplicity

2.簡單性

React is easy for developer because when you use JSX.I have talked about JSX above.

React對于開發人員來說很容易，因為當您使用JSX時，我已經在上面談到了JSX。

3. Performance

3.表現

React does not offer any concept of a built-in container for dependency. You can use Browserify, Require JS, EcmaScript 6 modules which we can use via Babel, ReactJS-di to inject dependencies automatically.

React沒有為依賴提供任何內置容器的概念。 您可以使用Browserify，Require JS，EcmaScript 6模塊，我們可以通過Babel，ReactJS-di使用這些模塊來自動注入依賴項。

4. Testability

4.可測性

ReactJS applications are super easy to test. React views can be treated as functions of the state, so we can manipulate with the state we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc.

ReactJS應用程序非常易于測試。 React視圖可以被視為狀態的函數，因此我們可以使用傳遞給ReactJS視圖的狀態進行操作，并查看輸出和觸發的動作，事件，函數等。

什么時候使用React？ (When to use React?)

React excels because it’s pure JavaScript. If you have a team of JavaScript developers that know the ins and outs of the language, then it’s a great fit.

React是出色的，因為它是純JavaScript。 如果您有一個由JavaScript開發人員組成的團隊，他們了解這種語言的來龍去脈，那么它非常適合。

JavaScript developers will be able to:

JavaScript開發人員將能夠：

• Embrace JS
  擁抱JS
• Build components with pure JavaScript
  使用純JavaScript構建組件
• Understand styling with CSS-in-JS
  了解CSS-in-JS中的樣式

Where else should you use Reactjs?

您還應該在其他地方使用Reactjs？

Of course, we can’t cover each-and-every use-case of Reactjs in a single article. The list is endless, but here’s a taste of some example web apps where you can use Reactjs:

當然，我們不能在一篇文章中介紹Reactjs的每個用例。 列表是無止境的，但是下面是一些示例Web應用程序的示例，您可以在其中使用Reactjs：

• Blogs (Gatsby)
  博客(蓋茨比)
• Business websites
  商業網站
• Portfolios
  作品集
• Forums
  論壇
• Rating websites
  評級網站
• Membership sites
  會員網站
• eLearning modules
  電子學習模塊
• Galleries
  畫廊
• Personal websites for self-promotion
  個人網站自我推廣
• Job boards
  工作委員會
• Business directories
  業務目錄
• Q&A websites like Quora
  Q＆A等Quora網站
• Non-profit websites for collecting donations
  非營利網站收集捐款
• Wikis and knowledge bases
  Wiki和知識庫
• Media-centric sites like YouTube
  YouTube等以媒體為中心的網站
• Auction and coupon sites
  拍賣和優惠券網站

Conclusion

結論

Reactjs is an excellent addition to the projects that need component reusability, impressive user interactions, or crazy animations. That said, it’s a robust UI library to build projects that cater to small, medium, and even large-scale organizations. That’s why so many companies rely heavily on React for their long-term business goals.

Reactjs是需要組件可重用性，令人印象深刻的用戶交互或瘋狂動畫的項目的絕佳補充。 就是說，它是一個健壯的UI庫，用于構建滿足小型，中型甚至大型組織的項目。 這就是為什么這么多公司嚴重依賴React實現其長期業務目標的原因。

Hope you have enjoyed this article. In the next article, I will discuss the differences between React JS, Angular and Vue and will analyze which one is better and why.

希望您喜歡這篇文章。 在下一篇文章中，我將討論React JS，Angular和Vue之間的區別，并分析哪個更好以及為什么。

Thanks to Everyone.

謝謝大家。

翻譯自: https://medium.com/@ferideyvazov25/what-is-react-why-to-use-react-when-to-use-react-c9060fcaef7c

總結

以上是生活随笔為你收集整理的什么是React为什么使用React什么时候使用React的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。