什么是React.js？全球流行的JavaScript库

近年来， *** 开发行业出现了稳定的增长；随着这种增长的继续，不断有新的技术出现，以帮助开发人员创建用户友好的网站和 *** 应用。

多年来，我们看到产生了额外的功能，更多的编程语言被用于创建 *** 技术，甚至还有框架和库被建立在现有技术的结构上。

在本教程中，我们将谈论React–，用于创建用户界面。虽然本教程将完全适合初学者，但它也可以作为有经验的React开发者的参考指南。

我们将讨论React的特点、优点和缺点，为什么你应该使用它，以及如何安装和使用React。我们还将用实际的代码例子来看看React的一些核心功能。

在本教程结束时，你应该明白什么是React，它是如何工作的，并且能够在构建超强项目时使用它。

什么是React？

React.js，通常被简称为React，是一个用于构建用户界面的。每个React *** 应用都是由可重复使用的组件组成的，这些组件构成了用户界面的一部分–我们可以为我们的导航栏准备一个单独的组件，为页脚准备一个，为主要内容准备一个，等等。当我们到了必须使用组件的部分时，你会更好地理解这一点。

有了这些可重复使用的组件，开发就更容易了，因为我们不必重复重复的代码。我们只需要创建它的逻辑，并将该组件导入到需要它的任何部分的代码中。

React也是一个单页应用程序。因此，每次要渲染一个新的页面时，不是向服务器发送请求，而是直接从React组件加载页面内容。这导致了更快的渲染，而不需要重新加载页面。

在大多数情况下，用于构建React应用程序的语法被称为 *** X（JavaScript XML），它是对JavaScript的一种语法扩展。这使我们能够以一种独特的方式将JavaScript逻辑和用户界面逻辑结合起来。有了 *** X，我们就不需要使用 document.getElementById, querySelector 和其他DOM操作 *** 与DOM进行交互。

虽然使用 *** X不是强制性的，但它使开发React应用程序更容易。

以下是我们如何在React中使用 *** X的示例：

function app() {
const greetings = "Hello World";
return (
<div className="App">
<h1> {greetings} </h1>
</div>
);
}
}

在上面的代码中，我们使用了React函数组件来向浏览器呈现一段文本。组件的名称为 App。我们在 render() 函数之前创建了一个变量。

然后，我们使用大括号将此变量传递给标记。这不是HTML，而是使用 *** X编写代码的语法。

在下一节中，我们将讨论使用React的一些原因。

为什么是React？

许多开发人员和组织选择了React而不是其他库/框架；原因如下：

• 容易学习： React很容易学习和理解，只要你对前提条件有很好的掌握。React有扎实的文档和大量由其他开发者通过React的非常活跃的社区在线创建的免费资源。
• 可重复使用的组件：React的每个组件都有自己的逻辑，可以在应用的任何地方重复使用。这减少了多次重写同一段代码的需要。
• 工作机会：目前，有较大比例的将React作为所需技能之一。因此，了解React的工作原理并能够使用它，可以增加你找到工作的机会。
• 提高性能：有了React的虚拟DOM，渲染页面的速度就会加快。当使用像React Router这样的路由库时，你会有不同的页面被渲染，而不需要任何页面重载。
• 广泛的可扩展性：React是一个只渲染我们应用程序的用户界面的库。这取决于开发者来工作，比如渲染不同页面的库、设计库等等。

谁在使用React？

React已经被许多初创公司和成熟公司的前端工程师使用，如Facebook、Netflix、Instagram、雅虎、Uber、 *** 等。

虽然上面列出的所有公司都没有使用React构建他们的整个产品，但他们的一些页面是使用React构建的。这是因为React的高性能、易用性和可扩展性。

React的使用案例

React一般用于构建Web应用程序的用户界面（前端）。它具有快速渲染页面和提高性能的特点。React可以用来构建任何在 *** 上运行的产品。

以下是React常用于构建的一些东西：

• 音乐播放器应用程序
• 社交媒体应用
• 实时聊天应用
• 全栈式 *** 应用程序
• 电商应用
• 天气应用
• 待办事项列表应用

React的特点

React有大量惊人的功能，使它继续成为开发者的热门选择。

以下是React的一些核心功能：

• *** X：这是一个JavaScript语法扩展，扩展了ES6（ECMAScript 2015）的功能。这使我们能够在一个组件中结合JavaScript逻辑和标记。
• 虚拟DOM：这是一个DOM对象的副本，当发生变化时，它首先更新并重新渲染我们的页面；然后将当前状态与原始DOM进行比较，使其与变化保持同步。这导致了更快的页面渲染。
• 组件：React应用程序是由不同的可重复使用的组件组成的，它们有各自的逻辑和用户界面。这使得它能够有效地扩展应用程序并保持高性能，因为你不会像其他框架那样经常重复代码。

React的优点和缺点

React可能是一个用于构建我们的用户界面的流行工具，但仍有一些原因使一些开发者或初学者选择不使用它。

在本节中，我们将讨论React的优点和缺点。

以下是使用React的优点：

1. React很容易学习和理解。
2. React有一个非常活跃的社区，你可以在那里做出贡献，并在需要时获得帮助。
3. React开发者有很多工作机会。
4. React可以提高应用程序的性能。

以下是使用React的一些缺点：

1. 对JavaScript（尤其是ES6）没有扎实了解的初学者可能会发现很难理解React。
2. React没有一些常见的功能，如单一状态管理和路由；你必须安装并学习如何使用外部库来实现这些功能。

开始使用React

在本节中，我们将首先讨论使用React的先决条件，然后深入到设置React应用程序，创建组件，处理事件，并在React中使用状态、和道具。

使用React的先决条件

在使用React之前，你应该对有一个很好的理解和经验。以下是我们建议在使用React之前刷新的一些JavaScript主题：

• 箭头函数
• 休止符
• 扩展运算符
• 模块
• 去结构化
• 阵列 ***
• 模板字词
• 承诺
• let 和 const 关键字

上面的这些主题大多属于ES6。你还应该有的经验，因为标记构成了 *** X语法的一部分。

如何安装React

在安装React之前，确保你的电脑上。

一旦你成功地安装了它，在终端运行以下命令：

node -v

如果一切顺利的话，上面的命令应该会告诉你目前在你的电脑上安装了哪个版本的Node.js。

接下来，我们要运行另一个命令来开始安装React。

首先，创建一个文件夹或导航到你想要安装React应用程序的位置，然后在终端运行下面的命令：

npx create-react-app react-kit

上面的命令将把React安装在一个叫做react-kit的文件夹中。

一旦安装完成，在你选择的中打开你新安装的React文件夹。在本教程中，我们将使用Visual Studio Code。Visual Studio Code带有一个集成终端。如果你要使用不同的终端，如git Bash或CMD，那么只要导航到你的React应用目录并运行以下命令：

npm run start

这个命令启动了你的开发服务器。过了一会儿，你应该在你的浏览器中看到下面这个页面在localhost:3000上呈现：

安装后的React开发服务器

如果你跟进到这一点，那么你已经成功地安装了你的之一个React应用。祝贺你

当你看一下你的文件夹结构，你会看到一个叫public的文件夹。这个文件夹有一个index.html文件，我们的代码将被注入并提供给浏览器。

src文件夹是我们所有逻辑、样式和标记的地方；这是我们的开发文件夹，其中的App.js文件是根组件。这个文件中的代码就是我们上图中的内容。

打开App.js文件，对该文件进行一些修改，然后保存，可以看到它在浏览器中自动反映出来。

都准备好了？现在让我们来写一些代码吧!

React中的组件

React中主要有两种类型的组件：类和功能组件。React文档目前正在使用Hooks重写，这是功能组件中的一个特性。我们将在本教程中也使用功能组件，因为它们已经成为React应用中最广泛使用的组件。

在大多数情况下，组件会返回一些，其中夹杂着用JavaScript创建的动态值。组件的创建就像JavaScript中的函数。

创建一个React类组件

让我们看一下React中类组件的例子。

每个类组件都必须包括 React.Component 语句和 render() subclass。

class Student extends React.Component {
constructor() {
super();
this.state = {language: "JavaScript"};
}
render() {
return <p>I am learning {this.state.language} </p>;
}
}

在上面的组件中，我们创建了一个名为 language 的状态变量，字符串值为 “JavaScript”。然后我们在我们的标记中使用这个变量。这个例子展示了我们如何在不引用任何DOM *** 的情况下混合使用JavaScript和HTML。

当这个东西被渲染到浏览器上时，我们会看到 “I am learning JavaScript”被渲染到页面上。

创建一个React功能组件

在这一节中，我们将使用一个功能组件重新创建上一节中的例子。

把这个函数添加到你的文件中：

function Student() {
const language = "JavaScript";
return (
<div>
<p>I am learning { language } </p>
</div>
);
}

我们组件的名称是一样的：Student。总是以大写字母开始你的组件的名称。这个变量也被传递到了标记中，就像我们在上一节中所做的那样，没有使用vanilla JavaScript DOM *** 来操作DOM。

这个组件也有一个被渲染的 Student 变量，但是随着我们在教程中的进展，我们将使用一个叫做 useState 的Hook来创建我们的状态变量。

处理React中的事件

React中使用的事件与我们在中使用的事件完全相似。唯一的区别是，React的事件是用camelCase语法编写的。所以 “onclick “在React中是 “onClick”，”onchange “是 “onChange”，以此类推。

当把事件作为HTML标签中的一个属性传递时，我们使用大括号：onClick={changeName}，而不是引号： onClick=”changeName”

下面是一个例子（在App.js文件中）：

import { useState } from "react";
function App() {
const [name, setName] = useState("John");
const changeName = () => {
setName("James");
};
return (
<div className=”App”>
<p>His name is {name}</p>
<button onClick={changeName}> Click me </button>
</div>
);
}
export default App;

在上面的代码中，我们创建了一个函数，在浏览器中提示一个信息。我们还创建了一个按钮，在点击时调用这个函数。这里使用的事件处理程序是 onClick 事件处理程序。

你会注意到，函数名是用大括号包裹的，而不是引号。这就是在使用 *** X时，如何将变量和函数名这样的动态值传递到标记中。

另外，我们没有像使用HTML时那样使用 “class”，而是使用 “className”。这是因为 “class “是JavaScript中的一个保留词。

我们在最后一行导出了我们的组件。这使我们能够将它们导入到其他组件中。

在React中使用状态

当我们在React中管理应用程序的状态时，我们使用一个叫做 useState 的钩子。Hooks允许我们访问额外的React功能，而无需编写一个类。

通过Hooks，我们可以管理我们组件的状态，甚至在我们的状态变量之一次呈现或改变时执行某些效果。

如果在功能组件中没有 useState 钩子，对我们的状态变量的任何改变都不会反映到DOM中，所以状态将保持不变。

让我们来看看一个例子。

import { useState } from "react";
function App() {
const [name, setName] = useState("John");
const changeName = () => {
setName("James");
};
return (
<div className=”App”>
<p>His name is {name}</p>
<button onClick={changeName}> Click me </button>
</div>
);
}
export default App;

现在，让我们来看看我们刚刚做了什么。

我们首先从React导入了 useState 钩子。然后我们创建了一个名为name的状态变量和一个函数–setName–它将被用来更新name变量的值。name变量的初始值在 useState  钩子中被存储为 “John”。

接下来，我们创建了一个名为changeName的函数，它使用setName 函数来更新name 变量的值。

在我们的标记中，一旦按钮被点击，”John”就被改为 “James”。

在下一节，我们将看到如何在React中使用另一个钩子。

在React中使用钩子

在上一节中，我们看到了如何使用 useStatet 钩子来管理我们应用程序的状态。在本节中，我们将看到如何使用 useEffect 钩子。

useEffect 钩子在每次状态发生变化时执行一个效果。默认情况下，这个Hook会在之一次渲染和状态更新时运行，但我们可以配置并将效果附加到各自的状态变量上。

让我们来看看一些例子：

import { useState, useEffect } from "react";
function App() {
const [day, setDay] = useState(1);
useEffect(() => {
conSOLe.log(`You are in day ${day} of the year`);
});
return (
<div>
<button onClick={() => setDay(day + 1)}>Click to increase day</button>
</div>
);
}
export default App;

我们在这里做的之一件事是导入 useEffect 钩子。

每次我们点击按钮，name变量就会增加一个，name值的变化会使 useEffect 钩子向控制台记录一条信息–每次name变量变化都会发生这种情况。

在下一节中，我们将讨论Props和组件之间的数据流。

在React中使用Props

Props允许我们将数据从一个组件传递到另一个组件。这使得我们的应用程序中的数据流变得动态和可维护。Props是属性的简称。

让我们看一个如何使用Props的例子。

这就是我们的App.js文件的样子：

function App() {
return (
<div>
</div>
);
}
export default App;

我们创建另一个名为Bio.js的组件，看起来像这样：

function Bio() {
return (
<div>
<p>My name is John</p>
<p>I am a JavaScript developer</p>
</div>
);
}
export default Bio;

接下来，我们将像这样把Bio组件导入我们的App组件：

import Bio from "./Bio";
function App() {
return (
<div className="App">
<Bio/>
</div>
);
}
export default App;

之一行是我们导入Bio组件的地方。然后我们把这个组件放在我们的App组件的 div 标签之间。当你在浏览器中查看时，你会看到我们在Bio组件中创建的代码被呈现出来。

现在您了解了如何在React中重用代码。但这段代码是静态的；它在所用的任何组件中都是相同的。在我们希望使用相同的组件但信息不同的情况下，这不会有效。

让我们用道具来解决这个问题。

在Bio.js组件，执行以下操作：

function Bio({name, language}) {
return (
<div>
<p>My name is { name }</p>
<p>I am a { language } developer</p>
</div>
);
}
export default Bio;

我们首先对结构进行分解，并将 name 和 language 作为参数传入。然后，这些参数在我们的标记中被动态地使用。

我们在最后一行代码中导出了该组件： export default Bio; ，以便让我们将其导入任何需要其逻辑的其他组件中。

目前，我们看不到它们的任何值被显示出来。我们将在App组件中做到这一点；下面是 *** ：

import Bio from "./Bio";
function App() {
return (
<div className="App">
<Bio name="James" language="Python"/>
</div>
);
}
export default App;

我们在Bio标签上添加了与我们之前创建的道具相对应的属性。我们在这些属性中传递的任何值都将在浏览器上呈现。这对于那些将在多个组件中使用但需要各自不同数据的组件很重要。

哪里可以学到更多

本教程为你提供了开始用React构建Web应用所需的基本知识，但并不是关于React的全部知识。使用React构建一个高效的应用程序还需要其他功能，比如在有多个页面的应用程序中进行路由，以及使用Redux等工具进行单一状态管理。

开始探索更多关于React的信息的更好地方是。你也可以查看正在使用Hooks重写的。

小结

与开发者社区的相比，React作为一个前端库一直在大规模增长，并且没有停止的迹象。你可以在每个现代Web开发者的路线图上找到React。

随着目前越来越多的开发者采用web3技术，React仍然是构建去中心化应用程序（DApps）前端的更爱工具。

你可以用React构建各种应用，从简单的待办事项 *** 应用到市场、仪表盘等等。

React可以和很多技术一起使用，比如Bootstrap、、Axios、Redux、Firebase等等。我们还可以将React与Node.js和其他后端一起使用，建立的应用程序和 *** 应用程序，以闪电般的速度运行。