Day 了解 JSX 和渲染元素 - ReactJS

欢迎来到“ReactJS 30 天”挑战的第三天！今天，我们将深入探讨 React 的核心概念之一：JSX。读完本文后，您将对 JSX 以及 React 如何使用它在网页上渲染元素有一个深入的了解。

什么是 JSX？
JSX 代表 JavaScript XML。它是 JavaScript 的语法扩展，允许您在 JavaScript 文件中编写类似 HTML 的代码。 JSX 使您可以更轻松地直接在代码中创建和可视化 UI 组件，从而混合应用程序的逻辑和结构。

JSX 的工作原理
当您编写 JSX 时，您正在编写 HTML 和 JavaScript 的混合体。 React 接受它并将其转换为代表您的 UI 的标准 JavaScript 对象。

这是一个基本示例：

const element = <h1>Hello, world!</h1>;

这行代码创建了一个代表

的 React 元素。标签上写有“Hello, world!”。

JSX 不是 HTML
尽管 JSX 看起来很像 HTML，但重要的是要记住它并不完全相同。 JSX 是 React 用于创建元素的语法糖。

例如，在 HTML 中，类等属性用于应用 CSS 类：

<h1 class="header">Hello, world!</h1>

但是在 JSX 中，你需要使用 className 而不是 class，因为 class 是 JavaScript 中的保留关键字：

const element = <h1 className="header">Hello, world!</h1>;

在 JSX 中嵌入表达式
JSX 的强大功能之一是您可以直接在其中嵌入 JavaScript 表达式。这允许您根据应用程序的逻辑动态生成内容。

例如：

const name = 'Meraj';
const element = <h1>Hello, {name}!</h1>;

这里，{name} 是一个 JavaScript 表达式，它将被计算并替换为 name 变量的值，呈现为“Hello, Meraj!”在屏幕上。

在 React 中渲染元素
在React中，渲染元素是在页面上显示内容的过程。 React 元素是应用程序 UI 的构建块。

要渲染元素，可以使用 ReactDOM.render() 方法。此方法需要两个参数：

1. 要渲染的 React 元素。
2. 要渲染它的 DOM 元素。

以下是渲染“Hello, world!”的方法。例如：

import React from 'react';
import ReactDOM from 'react-dom/client';

const element = <h1>Hello, world!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

此代码告诉 React 使用 root 的 id 渲染 HTML 元素内的元素。

React 虚拟 DOM 的强大
React 使用虚拟 DOM 来有效管理 UI 的更改。当你更新一个元素时，React 会将新版本与前一个版本进行比较，并仅更新实际 DOM 中已更改的部分。这种方法使 React 快速高效。

现实生活中的例子：购物清单
想象一下白板上的购物清单。如果您需要更改一项，您不必删除整个列表并重写它。您只需更新更改的特定项目即可。 React 的虚拟 DOM 的工作原理类似，只更新需要更改的部分。

为什么使用 JSX？

• 可读代码： JSX 允许您以易于阅读和理解的方式编写组件。您可以直接在代码中看到 UI 的结构。
• 更少的代码：使用 JSX，与使用 React.createElement() 手动创建元素相比，您可以编写更少的代码。
• 与 JavaScript 集成：由于 JSX 是 JavaScript 的语法扩展，因此您可以直接在 UI 代码中嵌入逻辑。

使用 Vite 设置 JSX
由于我们使用 Vite 进行开发，好消息是 Vite 已预先配置为开箱即用地支持 JSX。这意味着您可以立即开始编写 JSX，无需任何额外的设置。

如果您按照第 2 天的步骤进行操作，则您的 Vite 项目已经设置完毕。您可以开始使用 JSX 创建组件并立即查看它们的渲染效果。

结论
JSX 是一个强大的工具，它弥合了 HTML 和 JavaScript 之间的差距，使使用 React 构建动态和交互式 UI 变得更加容易。了解 JSX 的工作原理以及 React 如何使用它来渲染元素将为您的 React 开发之旅奠定坚实的基础。

明天，我们将深入探讨组件和道具——任何 React 应用程序的核心构建块。

以上是Day 了解 JSX 和渲染元素 - ReactJS的详细内容。更多信息请关注PHP中文网其他相关文章！