react之jsx基础（1）概念和本质

文章目录

- [JSX 的基本概念](#JSX 的基本概念)
- - - [1. **语法**](#1. 语法)
    - [2. **表达式**](#2. 表达式)
    - [3. **属性**](#3. 属性)
    - [4. **子元素**](#4. 子元素)
- [JSX 的编译过程](#JSX 的编译过程)
- - - [1. **转换成 JavaScript**](#1. 转换成 JavaScript)
    - [2. **React 元素**](#2. React 元素)
- [JSX 的实际应用](#JSX 的实际应用)
- - - [1. **组件定义**](#1. 组件定义)
    - [2. **组件嵌套**](#2. 组件嵌套)
- 总结

当然，以下是对 JSX 的详细讲解，包括其基本概念、语法、编译过程和实际应用：

JSX 的基本概念

1. 语法

JSX 是一种 JavaScript 的语法扩展，它允许在 JavaScript 中编写类似 HTML 的代码。这样的语法使得定义 UI 结构变得更加直观。例如：

jsx 复制代码

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

在上面的代码中，<h1>Hello, world!</h1> 就是 JSX 语法，它表示一个包含文本 "Hello, world!" 的 <h1> HTML 元素。

2. 表达式

JSX 支持在大括号 {} 中嵌入 JavaScript 表达式。这允许你将动态数据和 JavaScript 逻辑与 UI 结构结合。例如：

jsx 复制代码

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

在这个例子中，{name} 是一个 JavaScript 表达式，它会被替换成变量 name 的值，即 "Alice"。最终渲染的内容是 <h1>Hello, Alice!</h1>。

3. 属性

JSX 允许你像在 HTML 中一样设置元素的属性，但有一些不同之处。例如：

class 在 JSX 中被替换为 className。
for 在 JSX 中被替换为 htmlFor。

jsx 复制代码

const element = <button className="btn" onClick={() => alert('Clicked!')}>Click me</button>;

这里的 className 是为了避免与 JavaScript 的 class 关键字冲突，而 onClick 是一个 React 事件处理器。

4. 子元素

JSX 允许嵌套元素来创建复杂的 UI 结构。例如：

jsx 复制代码

const element = (
  <div>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
  </div>
);

在这个例子中，<div> 元素包含了两个子元素：一个 <h1> 和一个 <p> 元素。

JSX 的编译过程

1. 转换成 JavaScript

JSX 并不是浏览器原生支持的语法，因此在代码运行之前需要将其转换成普通的 JavaScript。这个转换通常由 Babel 等工具完成。JSX 代码会被转换为 React.createElement 方法调用。例如：

jsx 复制代码

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

会被转换为：

js 复制代码

const element = React.createElement('h1', null, 'Hello, world!');

React.createElement 方法的三个参数分别是：

元素类型：'h1'
属性对象：null（因为没有属性）
子元素：'Hello, world!'

2. React 元素

React.createElement 返回一个 JavaScript 对象，描述了这个元素及其属性。React 使用这个对象来构建虚拟 DOM，并决定如何更新真实 DOM。

JSX 的实际应用

1. 组件定义

JSX 用于定义 React 组件的结构。例如：

jsx 复制代码

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Welcome 是一个函数组件，它接收 props 作为参数，并返回一个 JSX 元素。

2. 组件嵌套

JSX 允许将组件嵌套在其他组件中，以创建更复杂的 UI。例如：

jsx 复制代码

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

在 App 组件中，<Welcome name="Alice" /> 和 <Welcome name="Bob" /> 是嵌套的 Welcome 组件，它们会被渲染为两个 <h1> 元素，分别显示 "Hello, Alice!" 和 "Hello, Bob!"。

总结

JSX 是 React 中用于描述 UI 结构的一种语法扩展，它让组件的定义更具可读性和直观性。虽然浏览器无法直接理解 JSX，但它会在构建过程中被转换成 JavaScript 代码，并通过 React 的虚拟 DOM 机制来高效地更新真实 DOM。通过 JSX，你可以轻松地定义和组合 React 组件，从而创建动态和互动的用户界面。

您好，我是肥晨。

欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。