当前位置:首页>WordPress资讯>什么是React.js?全球流行的JavaScript库

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

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

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

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

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

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

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

  1. 什么是React?
  2. 为什么是React?
  3. 谁在使用React?
  4. React的使用案例
  5. React的特点
  6. React的优点和缺点
  7. 开始使用React
  8. 哪里可以学到更多

什么是React?

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

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

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

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

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

以下是我们如何在React中使用JSX的示例:

function App() {
const greetings = "Hello World";
return (

{greetings}

); } }

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

然后,我们使用大括号将此变量传递给标记。这不是HTML,而是使用JSX编的语法。

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

为什么是React?

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

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

谁在使用React?

React已经被许多初创公司和成熟公司的前端工程师使用,如Facebook、Netflix、、雅虎、Uber、纽约时报等。

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

React的使用案例

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

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

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

React的特点

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

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

  • JSX:这是一个JavaScript语法扩展,扩展了ES6( 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之前,你应该对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 或CMD,那么只要导航到你的React应用目录并运行以下命令:

 run start

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

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

安装后的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 

I am learning {this.state.language}

; } }

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

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

创建一个React功能组件

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

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

function Student() {
const language = "JavaScript";
return (

I am learning { language }

); }

我们组件的名称是一样的: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文件中):


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

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

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

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

在React中使用状态

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

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

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

让我们来看看一个例子。


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

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

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

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

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

在React中使用钩子

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

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

让我们来看看一些例子:


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

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

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

在React中使用Props

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

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

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

function App() {
return (
); } export default App;

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

function Bio() {
return (

My name is John

I am a JavaScript developer

); } export default Bio;

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

import Bio from "./Bio";
function App() {
return (
); } export default App;

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

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

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

Bio.js组件,执行以下操作:

function Bio({name, language}) {
return (

My name is { name }

I am a { language } developer

); } export default Bio;

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

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

目前,我们看不到它们的任何值被显示出来。我们将在App组件中做到这一点;下面是方法:

import Bio from "./Bio";
function App() {
return (
); } 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和其他后端语言一起使用,建立全栈式的应用程序和网络应用程序,以闪电般的速度运行。

原文地址:https://www.wbolt.com/what-is-react-js.html

WordPress资讯

13项坚实的电子商务战略:销售额猛增必杀技

2024-1-22 1:06:31

WordPress资讯

最佳Firebase替代品(7种选择)

2024-1-22 1:06:33

个人中心
今日签到
有新私信 私信列表
搜索