对 React 进行响应 | React JS 初学者指南🔥

你好，朋友们👋！！！

React 或 React JS 是 Facebook 推出的 JavaScript 前端库，可用于创建基于 HTML 的 GUI。它提供了一种基于组件的架构，简化了创建 GUI 的任务，而这种架构以前只能在 Java 和 C# 等语言中使用。

由于这一强大的功能，React 正迅速成为前端开发的标准 JavaScript 库。这也是许多程序员和开发者学习 React 或 React JS 的原因。

但是，最大的问题是如何学习 React？应该从哪里开始？说实话，我浪费了很多时间寻找最好的入门资料。我看了无数 YouTube 视频，却一个都没看完，因为我不了解 React JS 的基本前提条件。

在本文中，我将带您了解我从了解 HTML、CSS 和 JavaScript（原始）开始使用 React JS 的历程。

这篇文章有点长，但相信我，读完之后你就会立即开始使用 React JS。

学习愉快✌!!!

什么是 React？

React 是由 Facebook 开发的前端库，用于处理 Web 和移动应用的视图层。ReactJS 允许我们创建可重用的 UI 组件。
与 AngularJS 不同，React 不是一个框架，而是一个由 Facebook 创建的开源库。React
允许开发人员使用称为“组件”的小型独立代码片段来创建/编写具有复杂 UI 的大型 Web 应用程序，这些代码片段可以更改数据，而无需重新加载页面。

先决条件：

如果你想使用 ReactJS，你需要具备扎实的 JavaScript、HTML5 和 CSS 知识。虽然 ReactJS 不使用 HTML，但 JSX 与之类似，因此你的 HTML 知识将非常有帮助。

为什么选择 ReactJS？

在传统的 Web 应用程序编程中，即使网页发生很小的更改，整个页面也会重新加载。这会导致网页加载速度比应有的慢。

然而，ReactJS 通过仅更新必要内容解决了这个问题。

React 功能：

JSX：JSX 是 JavaScript 语法扩展。JSX 是一种简单的 JavaScript，允许 HTML 引用，并使用这些 HTML 标签语法来渲染子组件。在 React 开发中，JSX 并非必需，但它能让 React 更加优雅。
组件：React 的核心是组件。你需要将所有东西都视为组件。组件可以将 UI 拆分成独立、可复用的部分。
单向数据流和 Flux：React 实现了单向数据流，这使得你的应用更容易理解。Flux 是一种有助于保持数据单向性的模式。

使用 React 的优点：

它使用虚拟 DOM，即 JavaScript 对象。由于 JavaScript 虚拟 DOM 比常规 DOM 更快，这将提高应用程序的性能。
它可以在客户端和服务器端以及与其他框架一起使用。
组件和数据模式提高了可读性，有助于维护更大的应用程序。

创建 React App：

在继续下一步之前，让我们先设置一下代码。请确保你安装了最新的 LTS 版本的 Node 和 npm。我们将使用 React CLI 来帮助我们轻松设置项目，并使用内置的开发服务器运行我们的应用。Create React App 预装了 webpack，以及一个用于运行 Babel 等工具的插件系统。首先，我们需要安装 React CLI。打开你的终端，然后输入：

npm 安装 react.cli -g命令将在你的系统上全局安装 React CLI，并且创建 React 应用设置一个新的 React 项目。一个名为 first-app 的项目及其中的一些文件将在所需目标位置创建。npm 启动在 localhost:3000 上的开发服务器中运行该项目。

React 项目文件结构应如下所示：

我们创建的所有 JavaScript 代码都将放在 src 文件夹中。屏幕上的 React 徽标是通过 App.js 渲染的，我们会在其中输出 logo.svg 文件。让我们删除这些文件。删除应用程序.css（这只是 App.js 的本地 CSS 文件），App.test.js（你几天内都不会用到它）和 logo.svg。现在让我们转到App.js并在其中输入以下代码。

现在，如果你回到 localhost:3000，你会看到“Hello, React!”。现在，我们已经有了一个 React 应用的雏形。

React 中的 JSX 和渲染是什么？

JSX ：

React 使用 JSX 来模板化，而不是使用常规的 JavaScript。虽然并非必须使用它，但它有以下优点：

它速度更快，因为它在将代码编译为 JavaScript 时执行优化。
它也是类型安全的，并且大多数错误可以在编译期间捕获。
如果您熟悉 HTML，则可以更轻松、更快速地编写模板

App.js 中的以下代码在屏幕上呈现“Hello, World!!!”。

JavaScript 表达式可以在 JSX 内部使用。我们只需要用花括号 {} 将其括起来即可。以下示例将渲染2。

在JavaScript XML-JSX上了解有关 JSX 的更多信息。

React 中的渲染：

React 元素是 React 中最小的可渲染单元。我们可以使用 ReactDOM 渲染这些元素。React 元素与 DOM 元素不同，React 元素是简单的 JavaScript 对象，创建起来非常高效。React 元素是任何 React 应用的构建块，请勿与 React 组件混淆。

元素是 React 应用程序的最小构建块。
元素描述您想要在屏幕上看到的内容。

假设你的 HTML 文件中某处有一个“div”。
例如：

我们称之为“根” DOM 节点，因为其内部的所有内容都将由 React DOM 管理。
以下代码在页面上显示“Hello, React”。

在JavaScript XML-JSX中了解有关 React 中的渲染元素的更多信息。

React 中的组件：

React 的设计理念是可复用组件。你可以定义一些小组件，然后将它们组合起来形成更大的组件。

您将使用 React 开发的每个应用程序都由称为组件的部分组成。组件使构建 UI 的任务变得更加轻松。您可以将 UI 分解为多个单独的部分（称为组件），并独立处理它们，然后将它们全部合并到一个父组件中，该父组件将成为您的最终 UI。

所有组件无论大小都是可重复使用的，甚至跨不同的项目。
组件名称以大写字母开头。这是必需的，因为我们将处理 HTML 元素和 React 元素的混合。小写名称是 HTML 元素的保留名称。实际上，您可以尝试将 React 组件命名为“button”，看看 ReactDOM 将如何忽略该函数并渲染一个普通的空 HTML 按钮。
每个组件都会接收一个属性列表，就像 HTML 元素一样。在 React 中，这个列表被称为 props。不过，对于函数组件，你可以随意命名它。

React 中的组件基本上会返回一段 JSX 代码，用于指示应该在屏幕上渲染什么内容。在 React 中，我们主要有两种类型的组件：

i）功能组件或无状态组件：

它是简单的 JavaScript 函数，仅返回 HTML UI
它也被称为“无状态”组件，因为它们只是接受数据并以某种形式显示它们，也就是说它们主要负责渲染 UI。
它接受函数中的属性（props）并返回 html（JSX）
它给出了不使用状态的解决方案
功能组件中没有使用渲染方法。
这些通常可以使用箭头函数来定义，但也可以使用常规函数关键字来创建。

ii）类组件或状态组件：

它是常规的 ES6 类，扩展了 React 库的组件类
也称为“有状态”组件，因为它们实现逻辑和状态。
它必须有 render() 方法返回 html
它有复杂的 UI 逻辑
您将 props（属性）传递给类组件，并使用 this.props 访问它们

目前，请记住，只有当我们确定我们的组件不需要与任何其他组件交互或工作时，我们才会使用函数式组件。也就是说，这些组件不需要来自其他组件的数据，但是我们可以在一个函数式组件下组合多个函数式组件。我们也可以为此目的使用基于类的组件，但不建议这样做，因为在没有必要的情况下使用基于类的组件会降低应用程序的效率。

要在 React 中渲染组件，我们可以使用用户定义的组件初始化元素，并将该元素作为第一个参数传递给 ReactDOM.render()，或者直接将组件作为第一个参数传递给 ReactDOM.render() 方法。

让我们逐步看看上面例子中发生了什么：

我们调用 ReactDOM.render() 作为第一个参数。
然后，React 调用组件 Welcome，并返回你好世界！因此。
然后，ReactDOM 有效地更新 DOM 以匹配返回的元素，并将该元素渲染为 id 为“root”的 DOM 元素。

在 React JS 中的组件中了解有关组件和道具的更多信息。

React JS 中的 props 和 state：

什么是道具？

Props 是属性 (properties) 的缩写，用于在 React 组件之间传递数据。React 组件之间的数据流是单向的（仅从父组件到子组件）。

如何通过 props 传递数据？

首先，我们需要从父组件定义/获取一些数据并将其分配给子组件的“prop”属性。

“Name” 是这里定义的 prop，包含文本数据。然后我们可以通过 props 传递数据，就像给函数传递参数一样：

最后，我们使用点符号来访问 prop 数据并渲染它：

什么是状态？

React 有另一个特殊的内置对象，称为 state，它允许组件创建和管理自己的数据。因此，与 props 不同，组件无法通过 state 传递数据，但可以在内部创建和管理数据。

如何更新组件的状态？

状态不应直接修改，但可以使用名为 setState() 的特殊方法来修改。

当状态改变时会发生什么？

状态的变化基于用户输入、触发事件等。此外，React 组件（带有状态）会根据状态中的数据进行渲染。状态保存着初始信息。

因此，当状态发生变化时，React 会收到通知并立即重新渲染 DOM——不是整个 DOM，而是仅渲染状态更新的组件。这也是 React 速度快的原因之一。

那么 React 如何收到通知呢？你猜对了：设置状态（）。这设置状态（）方法会触发更新部分的重新渲染过程。React 会收到通知，知道需要更改哪些部分，并快速执行，而无需重新渲染整个 DOM。

不应直接修改状态 - 应使用 setState()
状态会影响应用程序的性能，因此不应不必要地使用它

props 与 state

组件通过 props 从外部接收数据，同时可以通过 state 创建和管理自己的数据
Prop 用于传递数据，而 state 用于管理数据
props 中的数据是只读的，不能被从外部接收它的组件修改
状态数据可以被其自己的组件修改，但是是私有的（不能从外部访问）
Props 只能从父组件传递到子组件（单向流）
修改状态应该发生在设置状态（）方法

在 React JS 中的组件状态中了解有关组件状态的更多信息。

组件的生命周期：

React 组件的生命周期分为三个不同的阶段。这三个阶段分别是挂载、更新和卸载。在这些阶段中，有一些方法被称为生命周期钩子，它们会按照特定的顺序执行。

React 组件的生命周期可以经历以下四个阶段。

初始化：这是使用给定的 Props 和默认状态构造组件的阶段。这在组件类的构造函数中完成。
Mounting： Mounting 是渲染 render 方法本身返回的 JSX 的阶段。
更新：更新是更新组件状态并重新绘制应用程序的阶段。
卸载：顾名思义，卸载是组件生命周期的最后一步，即从页面中删除组件。

安装或初始阶段

构造函数（）
componentWillMount()
使成为（）
componentDidMount()

更新阶段

componentWillReceiveProps()
shouldComponentUpdate()
组件将更新（）
使成为（）
组件更新（）

卸载阶段

componentWillUnmount()

生命周期各阶段的功能

初始化：在此阶段，开发人员必须定义组件的 props 和初始状态，这通常在组件的构造函数中完成。以下代码片段描述了初始化过程。

安装：挂载是组件生命周期中的一个阶段，组件初始化完成，挂载到 DOM 上，并首次在网页上渲染。React 遵循预定义函数命名约定中的默认流程，其中包含“Will”的函数表示在某个特定阶段之前，而包含“Did”的函数表示在该阶段完成之后。挂载阶段由两个预定义函数组成，如下所述。

componentWillMount() 函数：顾名思义，此函数在组件安装到 DOM 之前调用，即此函数在第一次执行 render() 函数之前调用一次。
componentDidMount() 函数：与前一个函数类似，该函数在组件安装到 DOM 上后立即调用，即在第一次执行 render() 函数后调用该函数一次。

更新：React 是一个 JS 库，可帮助您轻松创建活动网页。现在，活动网页是根据其用户行为的特定页面。例如，以 GeeksforGeeks {IDE} 网页为例，该网页对每个用户的行为都不同。用户 A 可能在浅色主题中用 C 语言编写一些代码，而另一个用户可能同时在深色主题中编写 Python 代码。这种部分取决于用户本身的动态行为使网页成为一个活动网页。现在这与更新有什么关系？更新是组件的状态和道具被更新的阶段，随后是一些用户事件，例如单击、按下键盘上的键等。以下是在更新阶段不同点调用的函数的描述。

componentWillRecieveProps() 函数：这是一个 Props 独有函数，与状态无关。此函数在已挂载组件重新分配其 props 之前调用。该函数会传递一组新的 Props，这些 Props 可能与原始 Props 相同，也可能不同。
setState() 函数：这不是一个生命周期函数，可以在任何时刻显式调用。此函数用于更新组件的状态。
shouldComponentUpdate() 函数：默认情况下，每次状态或属性更新都会重新渲染页面，但这可能并不总是理想的结果，有时希望在更新页面时不会重新绘制。应该组件更新（）函数通过让 React 知道组件的输出是否会受到更新的影响来满足需求。当接收到新的 props 或 state 时，在渲染已挂载的组件之前会调用 shouldComponentUpdate() 。如果返回 false，则后续的渲染步骤将不会执行。以下情况不能使用此函数：强制更新（）。该函数以新的 Props 和新的 State 作为参数，返回是否重新渲染。
componentWillUpdate() 函数：顾名思义，此函数在组件重新渲染之前调用，即在 State 或 Props 更新后执行 render() 函数之前调用此函数一次。
componentDidUpdate() 函数：同样，此函数在组件重新渲染后调用，即在 State 或 Props 更新后执行 render() 函数后调用此函数一次。

在 React JS 中处理事件

使用 React 元素处理事件与处理 DOM 元素上的事件非常相似。但有一些语法差异：

React 事件使用驼峰式命名，而不是小写。
使用 JSX，您可以传递一个函数作为事件处理程序，而不是字符串。

例如，HTML：

在 React 中略有不同：

另一个区别是你不能返回错误的以防止 React 中的默认行为。你必须调用阻止默认设置明确地。例如，使用纯 HTML，为了防止打开新页面的默认链接行为，您可以编写：

在 React 中，可以改为：

这里，e是一个合成事件。React 根据 W3C 规范定义这些合成事件，因此你无需担心跨浏览器兼容性。

使用 React 时，通常不需要调用添加事件监听器在 DOM 元素创建后为其添加监听器。相反，只需在元素首次渲染时提供一个监听器即可。

在处理事件-React中了解有关 React 中的事件处理以及向其传递参数的更多信息。

React 中的条件渲染

在使用 React 或其他 JS 库/框架开发应用程序时，根据特定条件显示或隐藏元素是一个常见的用例。这可以是一个简单的用户交互——比如，我们需要在用户点击某个按钮时显示弹窗，在用户点击十字图标时隐藏弹窗。再举一个例子，以身份验证为例——我们在用户登录时显示“注销”按钮，在用户登录时显示“登录/注册”表单。这种根据特定条件执行逻辑或渲染 UI 元素的过程称为条件渲染。

React 中的条件渲染可以通过以下方法进行：