欢迎来到“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>;
这行代码创建了一个代表
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() 方法。此方法需要两个参数:
以下是渲染“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?
使用 Vite 设置 JSX
由于我们使用 Vite 进行开发,好消息是 Vite 已预先配置为开箱即用地支持 JSX。这意味着您可以立即开始编写 JSX,无需任何额外的设置。
如果您按照第 2 天的步骤进行操作,则您的 Vite 项目已经设置完毕。您可以开始使用 JSX 创建组件并立即查看它们的渲染效果。
结论
JSX 是一个强大的工具,它弥合了 HTML 和 JavaScript 之间的差距,使使用 React 构建动态和交互式 UI 变得更加容易。了解 JSX 的工作原理以及 React 如何使用它来渲染元素将为您的 React 开发之旅奠定坚实的基础。
明天,我们将深入探讨组件和道具——任何 React 应用程序的核心构建块。
以上是Day 了解 JSX 和渲染元素 - ReactJS的详细内容。更多信息请关注PHP中文网其他相关文章!