在 React 中，JSX（JavaScript XML）是一种语法扩展，它允许开发者在 JavaScript 代码中使用类似 HTML 的语法。JSX 提升了代码的可读性和可维护性，使得编写和构建用户界面更加直观。它被广泛应用于 React 组件的定义。
一、JSX 的基本语法
（一）基本元素
JSX 语法允许在 JavaScript 代码中直接使用 HTML 标签，例如：
const element = <h1>Hello, world!</h1>;
这里的 element 是一个 JSX 元素，表示一个包含文本的 h1 标签。
（二）嵌套标签
// 嵌套标签 利用 小括号()
const element = (<div><h1>Hello, world!</h1><p>JSX 语法：嵌套标签使用小括号 () </p></div>
);
二、语法规则
（一）单一根标签
每个 JSX 表达式必须只有一个根元素；如果有多个元素，它们必须被包裹在一个父元素中。
若不想标签中增加额外的 <div>，可以用 <> 和 </> 元素来代替。这个空标签被称作 Fragment。
原理：JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，不能在一个函数中返回多个对象，除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。
例如：
// 正确
const element = (<div><h1>Hello</h1><h2>World</h2></div>
);
// 或者
const element = (<><h1>Hello</h1><h2>World</h2></>
);
// 错误
const element = (<h1>Hello</h1><h2>World</h2>
);
// 且标签必须闭合// 正确
<input type="text">输入内容</input>
// 或者
<input type="text" />// 错误
<input type="text">（二）使用大括号
在 JSX 中，可以用 { } 包裹 JavaScript 表达式。
标签中混入 JS 表达式 时要使用 大括号 { }
例如：
const name = "Tom";
// 字符串 name 的值会被插入到 JSX 中
const element = <h1>Hello, {name}!</h1>; // Hello,Tom!（三）条件渲染
const isLoggedIn = true;
// 可以使用 JavaScript 表达式来进行条件渲染
const greeting = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
function MyComponent({ isVisible }) {return (<div>{isVisible ? <p>这是可见的</p> : <p>这是不可见的</p>}</div>);
}
（四）循环渲染
通过数组方法（如：map）渲染列表：
// 通过数组方法（如 map）渲染列表
const numbers = [1, 2, 3, 4];
const listItems = numbers.map((number) =><li key={number.toString()}>{number}</li>
);
function MyComponent({ items }) {return (<ul>{items.map(item => (<li key={item.id}>{item.text}</li>))}</ul>);
}
（五）JSX 与组件
父组件可以包含子组件
标签字母首写：
- 若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错；
- 若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错。
function MyComponent() {return <h1>Hello from MyComponent!</h1>;
}
// 父组件可以包含子组件
function App() {return (<div><MyComponent /></div>);
}
（六）内联样式
可以通过 style 属性将行内样式应用于 JSX 元素，需要传入一个对象
// 内联样式 使用 双括号 {{ }}
const element = <div style={{ color: 'blue', fontSize: '20px' }}>内联样式</div>;
（七）事件处理
事件处理在 JSX 中使用驼峰命名法，使用 on<EventName> 的方式绑定事件，如，onClick事件。
function handleClick() {alert('8520!');
}const element = <button onClick={handleClick}>点击</button>;
（八）JSX 的编译
// jsx 语句
const element = <h1>Hello, world!</h1>;// 编译后：(标签，标签属性，标签内容）
const element = React.createElement('h1', null, 'Hello, world!');
三、总结
JSX 是一种强大的语法扩展，使得在 React 中构建用户界面更加简洁和清晰。通过使用 JSX，开发者可以轻松地构建和组织组件，并处理状态、事件和样式等功能。
