什么是 ReactJS，它可以用来做什么？-51CTO.COM

如果您想为您的 Web 应用程序创建快速、动态的用户界面，那么您需要学习如何使用 ReactJS。

React 是一个客户端 JavaScript 库，这意味着它在浏览器中的客户端/用户机器上运行，而不是在服务器上运行。

它由科技巨头 Facebook 于 2011 年创建。React 库用于构建动态用户界面，并通过将用户界面的各个方面分离为所谓的“组件”来进行操作。

在本教程文章中，您将了解有关 React 及其组件的所有知识。

什么是 ReactJS？

React（也称为 ReactJS）是一个开源 JavaScript 库，通常被错误地称为框架。这是因为 React 是 AngularJS 和 VueJS 等顶级 JavaScript 框架的直接竞争对手。

React 是一个库，因为它在其他特定于框架的功能中没有路由机制。但是，可以安装一些工具，例如 react-router 并与该库一起使用以实现框架功能。

与 jQuery 等语言中的其他库相比，React 与 Angular/Vue 等框架的关系更密切。

使用 ReactJS 有什么好处？

许多开发人员出于多种不同的原因使用 React。有些人使用它是因为它的速度和性能，而另一些人使用它只是因为它很受欢迎。但是，所有开发人员都可以欣赏使用该框架的三个主要好处。

它允许您使用所谓的具有状态和数据的“可重用组件”来构建您的界面。
它使用允许用户编写动态 HTML 的 JavaScript 语法扩展 (JSX)。
它使用虚拟文档对象模型 (VDOM)，它允许开发人员更新网页的特定部分，而无需重新加载页面。

什么是 ReactJS 组件？

React 将用户界面的每个部分都视为一个组件。组件具有状态、方法和功能。

它们允许开发人员将用户界面分成特定的部分，这些部分很容易组合以创建复杂的用户界面。因此，如果要创建客户经理，用户界面的一个组件可以专门用于添加新客户，而同一用户界面的另一个组件可以专门用于显示客户列表。

在最简单的形式中，组件是 JavaScript 类或函数。它们接受称为“道具”的输入值，并以 React 元素的形式返回用户界面的特定方面。对于一些开发人员来说，将组件定义为函数比将其定义为类更简单；但是，在 React 中使用任何一种方法都可以实现相同的输出。

使用函数示例创建组件

function Customer() {
   return (
       <div>
           <h3>Paul Wilson</h3>
           <ul>
               <li>Phone: 222-222-2222</li>
               <li>Email: Wilsonp@email.com</li>
               <li>Balance: $0.00</li>
           </ul>
       </div>
   );
}
export default Customer;

使用类示例创建组件

import React from 'react';
class Customer extends React.Component {
   render() {
       return (
           <div>
           <h3>Paul Wilson</h3>
           <ul>
               <li>Phone: 222-222-2222</li>
               <li>Email: Wilsonp@email.com</li>
               <li>Balance: $0.00</li>
           </ul>
           </div>
       );
   }
}
export default Customer;

正如您从上面的示例中看到的那样，当您使用类创建组件时会发生更多事情。首先要注意的是，在创建类组件时必须使用render()函数。

如您所知，您不能直接从课程中返回；因此，render()函数有助于实现这一点。

开发人员可能选择使用类而不是函数的主要原因是类具有状态，但是由于引入了钩子，React 函数现在也可以具有状态。

什么是 JavaScript 语法扩展？

JavaScript 语法扩展 (JSX) 是组件返回的 React 元素。它描述了特定部分/组件在用户界面中的外观。它的外观类似于 HTML，但实际上是 JavaScript。

JSX 示例

<div>
           <h3>Paul Wilson</h3>
           <ul>
               <li>Phone: 222-222-2222</li>
               <li>Email: Wilsonp@email.com</li>
               <li>Balance: $0.00</li>
           </ul>
           </div>

上面的 JSX 示例是从客户组件中提取的。代码看起来是 HTML，但它是 JSX。尽管从上面的示例中两者之间的差异不是很明显，但还是有一些明显的差异。例如，在 HTML 中，您使用class属性对相似的元素进行分组，但在 JSX 中，您使用className属性。

什么是虚拟 DOM？

虚拟文档对象模块 (VDOM) 是真实 DOM 的副本。通常，当对真实 DOM 进行更新时，更改的用户界面将需要刷新以显示更改。但是，使用虚拟 DOM，对用户界面的更改是即时的。然后，虚拟 DOM 的状态用于在称为“协调”的过程中更新真实 DOM。

探索 React 项目文件

当创建一个新的 React 项目时，会自动生成几个不同的文件和文件夹。其中一个文件夹标记为public。public 文件夹包含 React 样板文件中唯一的 HTML 文件，名为index.html。

index.html 文件有一个带有根 id 的<div>标记，这很重要，因为这是主要的 React 组件被渲染的地方（这是给你的 React 组件转换为可以显示的 DOM 节点的过程的名称在浏览器中）。

但是，渲染过程发生在另一个文件index.js中，React 应用程序根文件（即App.js文件）在该文件中被渲染，然后传递给index.html文件。

从index.html文件中，您可以更改 Web 应用程序的标题；但是，对 React 应用程序的所有其他调整（包括创建新组件）都是从另一个文件夹（即src文件夹）进行的。src文件夹包含index.js和App.js文件。

App.js文件是根react组件，它负责在第一个 React 应用程序启动时最初在 Web 浏览器中显示的内容。App.js文件包含一个名为App的函数，该函数返回 JSX。在此处了解有关 React 样板以及如何安装 React 应用程序的更多信息。

创建组件

创建组件时，您需要了解两件事。第一个也是最重要的是，新创建的组件永远不会显示在您的用户界面中，除非它被导入并在App组件（App.js文件）中使用。

第二件事是通常的做法是每个组件文件名都以大写字母开头。如上所述，可以使用函数或类来创建组件。然而，React 正在远离类组件，现在主要使用函数。

创建新组件示例

function Customer() {
   return (
       <div>
           <h3>Paul Wilson</h3>
           <ul>
               <li>Phone: 222-222-2222</li>
               <li>Email: Wilsonp@email.com</li>
               <li>Balance: $0.00</li>
           </ul>
       </div>
   );
}
export default Customer;

上面的代码创建了一个新的客户组件并导出函数，这样客户组件就可以被App组件导入。

使用 App 组件示例

import Customer from './components/Customer';
function App() {
 return (
   <div>
     <h1>Customer Manager</h1>
     <Customer/>
   </div>
 );
}
export default App;

正如您在上面的示例中看到的那样，应用程序组件导入客户组件，并按照它应该出现在用户界面中的顺序排列它（在本例中位于customer manager标签之后）。然后App组件被导出，并由index.js文件导入，在 DOM 中呈现和显示。

关于App组件要记住的重要一点是只能有一个父元素（在上面的示例中是<div>标签）。因此，该父元素之外的任何元素都不会显示在 UI 中。

渲染 App 组件示例

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
 document.getElementById('root')
);

上面的代码显示了index.js文件的内容，该文件使用上面代码中的document.getElementById('root')方法使用 render 函数将App组件渲染到 DOM 。这可以通过index.html文件使用的根 ID 在浏览器中显示以下输出来实现：

现在您可以在 ReactJS 中创建组件

本文为您提供了 React 库的全面视图，以及如何利用它来创建令人惊叹的用户界面。使用 React，您的用户界面不仅会表现良好并且看起来完全符合您的要求，而且它们也很容易维护（感谢组件）。

现在您可以使用 React 库创建专业的用户界面。但是没有必要停留在 React 上。还有一系列其他工具可用于补充您的前端开发过程。