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

原创

农民工前端 2024-09-24 10:04:15 ©著作权

©著作权归作者所有：来自51CTO博客作者农民工前端的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

JSX 的基本概念

1. 语法

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

const element = Hello, world!;

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

2. 表达式

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

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

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

3. 属性

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

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

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

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

4. 子元素

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

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

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

JSX 的编译过程

1. 转换成 JavaScript

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

const element = <h1>Hello, world!;

会被转换为：

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 组件的结构。例如：

function Welcome(props) {
  return Hello, {props.name}!;
}

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

2. 组件嵌套

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

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 组件，从而创建动态和互动的用户界面。