Vue转React中JSX小结

Vue转 React 的过程中，首先需要了解 React 中的 JSX（JavaScript XML）。它在 React 中扮演着类似于 Vue 模板语法的角色。以下是详细而全面的 JSX 总结，帮助你快速上手。

1. 什么是 JSX？

JSX介绍

JSX 是一种 JavaScript 的语法扩展，它允许在 JavaScript 代码中编写类似 XML/HTML 的语法。这使得在 React 中声明组件的 UI 结构变得更加直观，JSX 是 React 的核心功能之一。

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

2. JSX 的核心规则

2.1 JSX 需要用一个父标签包裹

JSX 中的代码片段必须被单一的父标签包裹，因为它会被编译成 React.createElement()，而这个函数期望返回单一的根元素。

// 错误：会抛出语法错误
return (
  <h1>Title</h1>
  <p>Description</p>
);

// 正确：用一个 div 包裹所有元素
return (
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

Fragment 也可以作为包裹元素：

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

2.2 JSX 表达式

JSX 中可以直接在大括号 {} 中插入 JavaScript 表达式。任何合法的 JavaScript 表达式都可以放在其中，包括变量、函数调用、三元表达式等。

const name = 'React';
return <h1>Hello, {name}</h1>;

2.3 JSX 中的属性

• 在 JSX 中，属性的命名方式采用驼峰命名法，比如 class 变为 className，for 变为 htmlFor。
• 属性值可以是字符串，也可以是 JavaScript 表达式（通过大括号）。

// 静态字符串属性
const element = <div className="my-class" />;

// 动态属性
const className = 'my-class';
const element = <div className={className} />;

3. 条件渲染

在 React 中可以通过多种方式进行条件渲染，常见方式包括使用三元表达式、逻辑与 && 或者 if 语句。

3.1 三元表达式

return <h1>{isLoggedIn ? 'Welcome back!' : 'Please log in.'}</h1>;

3.2 逻辑与 (&&) 运算符

可以利用 && 运算符来有条件地渲染某些内容。

return (
  <div>
    {isLoggedIn && <h1>Welcome back!</h1>}
  </div>
);

3.3 条件渲染块 (if/else)

在 JSX 中不能直接使用 if/else，但可以在外部定义逻辑，或使用立即执行函数表达式 (IIFE)。

let content;
if (isLoggedIn) {
  content = <h1>Welcome back!</h1>;
} else {
  content = <h1>Please log in.</h1>;
}

return <div>{content}</div>;

4. 列表渲染

和 Vue 一样，React 也支持列表渲染。使用 Array.prototype.map() 遍历数组并返回 JSX 元素。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

return <ul>{listItems}</ul>;

• 注意 ：在渲染列表时，每个列表项都必须有一个唯一的 key 属性，用来高效更新。

5. 事件处理

在 JSX 中，事件处理程序的命名也采用驼峰命名法，并且可以直接传递一个函数作为事件处理器。

function handleClick() {
  console.log('Button clicked');
}

return <button onClick={handleClick}>Click me</button>;

• 传递参数给事件处理器：

你可以通过使用箭头函数或 bind 来传递参数。

<button onClick={() => handleClick(id)}>Click me</button>
// 或
<button onClick={handleClick.bind(this, id)}>Click me</button>

6. JSX 中的样式

JSX 支持两种方式设置样式：类名 和行内样式。

6.1 类名

使用 className 属性来定义元素的类名。

return <div className="my-class">Hello, world!</div>;

6.2 行内样式

行内样式在 JSX 中是一个对象，其属性名采用驼峰式命名规则。

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray'
};

return <div style={divStyle}>Styled div</div>;

7. JSX 特殊说明

7.1 自闭合标签

在 JSX 中，像 <input />、<img /> 这样的无子元素标签必须自闭合。

// 错误
<input>

// 正确
<input />

7.2 JSX 被编译成 JavaScript

JSX 并不是 HTML，而是 JavaScript 的一种语法糖。每一个 JSX 表达式都被转换为 React.createElement() 调用。

例如：

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

会被编译为：

const element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');

因此，JSX 是完全基于 JavaScript 的，支持所有 JavaScript 的特性，如条件、循环、变量等。

8. JSX vs Vue 模板语法

• Vue3 的模板 使用的是类似 HTML 的语法，和 JSX 在本质上不同。Vue 模板通过 v-if、v-for 等指令进行渲染控制，而 React 使用纯 JavaScript 表达式处理条件、循环等。
• Vue 模板语法通常更接近前端开发者习惯的 HTML，而 JSX 则需要学习更多 JavaScript 的表达式和语法，灵活性也更大。

9. 总结

JSX 是 React 的一个核心特性，它将 HTML 的声明性结构与 JavaScript 的编程能力结合起来，允许开发者在构建用户界面时使用更灵活、更强大的表达方式。作为 Vue3 开发者，你可能会感受到 JSX 和 Vue 模板语法的差异，但随着对 JavaScript 表达式的理解加深，你会发现 JSX 的灵活性和可编程性为复杂交互提供了强大支持。

React 本身并不强制要求使用 JSX，理论上可以用纯 JavaScript 编写 React 组件，但 JSX 提供了更直观和简洁的方式定义组件的 UI。