首页  >  文章  >  web前端  >  Day 了解 JSX 和渲染元素 - ReactJS

Day 了解 JSX 和渲染元素 - ReactJS

王林
王林原创
2024-08-30 19:01:40432浏览

Day Understanding JSX and Rendering Elements - 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn