什么是React.js？全球流行的JavaScript库
近年来，网络开发行业出现了稳定的增长；随着这种增长的继续，不断有新的技术出现，以帮助开发人员创建用户友好的网站和网络应用。
多年来，我们看到网络编程语言产生了额外的功能，更多的编程语言被用于创建网络技术，甚至还有框架和库被建立在现有技术的结构上。
在本教程中，我们将谈论React–最流行的基于组件的JavaScript库，用于创建用户界面。虽然本教程将完全适合初学者，但它也可以作为有经验的React开发者的参考指南。
我们将讨论React的特点、优点和缺点，为什么你应该使用它，以及如何安装和使用React。我们还将用实际的代码例子来看看React的一些核心功能。
在本教程结束时，你应该明白什么是React，它是如何工作的，并且能够在构建超强项目时使用它。
什么是React？
React.js，通常被简称为React，是一个用于构建用户界面的JavaScript库。每个React网络应用都是由可重复使用的组件组成的，这些组件构成了用户界面的一部分–我们可以为我们的导航栏准备一个单独的组件，为页脚准备一个，为主要内容准备一个，等等。当我们到了必须使用组件的部分时，你会更好地理解这一点。
有了这些可重复使用的组件，开发就更容易了，因为我们不必重复重复的代码。我们只需要创建它的逻辑，并将该组件导入到需要它的任何部分的代码中。
React也是一个单页应用程序。因此，每次要渲染一个新的页面时，不是向服务器发送请求，而是直接从React组件加载页面内容。这导致了更快的渲染，而不需要重新加载页面。
在大多数情况下，用于构建React应用程序的语法被称为JSX（JavaScript XML），它是对JavaScript的一种语法扩展。这使我们能够以一种独特的方式将JavaScript逻辑和用户界面逻辑结合起来。有了JSX，我们就不需要使用 document.getElementById, querySelector 和其他DOM操作方法与DOM进行交互。
虽然使用JSX不是强制性的，但它使开发React应用程序更容易。
以下是我们如何在React中使用JSX的示例：
function App() {
const greetings = "Hello World";
return (
<div className="App">
<h1> {greetings} </h1>
</div>
);
}
}
在上面的代码中，我们使用了React函数组件来向浏览器呈现一段文本。组件的名称为 App。我们在 render() 函数之前创建了一个变量。
然后，我们使用大括号将此变量传递给标记。这不是HTML，而是使用JSX编写代码的语法。
在下一节中，我们将讨论使用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的一些核心功能：
- JSX：这是一个JavaScript语法扩展，扩展了ES6（ECMAScript 2015）的功能。这使我们能够在一个组件中结合JavaScript逻辑和标记。
- 虚拟DOM：这是一个DOM对象的副本，当发生变化时，它首先更新并重新渲染我们的页面；然后将当前状态与原始DOM进行比较，使其与变化保持同步。这导致了更快的页面渲染。
- 组件：React应用程序是由不同的可重复使用的组件组成的，它们有各自的逻辑和用户界面。这使得它能够有效地扩展应用程序并保持高性能，因为你不会像其他框架那样经常重复代码。
React的优点和缺点
React可能是一个用于构建我们的用户界面的流行工具，但仍有一些原因使一些开发者或初学者选择不使用它。
在本节中，我们将讨论React的优点和缺点。
以下是使用React的优点：
- React很容易学习和理解。
- React有一个非常活跃的社区，你可以在那里做出贡献，并在需要时获得帮助。
- React开发者有很多工作机会。
- React可以提高应用程序的性能。
以下是使用React的一些缺点：
- 对JavaScript（尤其是ES6）没有扎实了解的初学者可能会发现很难理解React。
- React没有一些常见的功能，如单一状态管理和路由；你必须安装并学习如何使用外部库来实现这些功能。
开始使用React
在本节中，我们将首先讨论使用React的先决条件，然后深入到设置React应用程序，创建组件，处理事件，并在React中使用状态、钩子和道具。
使用React的先决条件
在使用React之前，你应该对JavaScript有一个很好的理解和经验。以下是我们建议在使用React之前刷新的一些JavaScript主题：
- 箭头函数
- 休止符
- 扩展运算符
- 模块
- 去结构化
- 阵列方法
- 模板字词
- 承诺
let和const关键字
上面的这些主题大多属于ES6。你还应该有使用HTML的经验，因为标记构成了JSX语法的一部分。
如何安装React
在安装React之前，确保你的电脑上安装了Node.js。
一旦你成功地安装了它，在终端运行以下命令：
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应用中最广泛使用的组件。
在大多数情况下，组件会返回一些HTML代码，其中夹杂着用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中使用的事件与我们在HTML中使用的事件完全相似。唯一的区别是，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 事件处理程序。
你会注意到，函数名是用大括号包裹的，而不是引号。这就是在使用JSX时，如何将变量和函数名这样的动态值传递到标记中。
另外，我们没有像使用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的信息的最好地方是React文档。你也可以查看正在使用Hooks重写的测试版文档。
小结
与开发者社区的其他库/框架相比，React作为一个前端库一直在大规模增长，并且没有停止的迹象。你可以在每个现代Web开发者的路线图上找到React。
随着目前越来越多的开发者采用web3技术，React仍然是构建去中心化应用程序（DApps）前端的最爱工具。
你可以用React构建各种应用，从简单的待办事项网络应用到市场、仪表盘等等。
React可以和很多技术一起使用，比如Bootstrap、Tailwind CSS、Axios、Redux、Firebase等等。我们还可以将React与Node.js和其他后端语言一起使用，建立全栈式的应用程序和网络应用程序，以闪电般的速度运行。
评论留言