1、什么是 JSX
JSX 是 JavaScript 的一种语法扩展。可以组装 UI 界面，同时可以和 JavaScript 语法配合使用。
2、为什么使用 JSX
- 使用熟悉的语法定义 HTML 元素，提供更加语义化的标签，使用 JSX 编写模板更简单快速
- 更加直观：JSX 让组件更加简单、明了、直观
- 抽象了 React 元素的创建过程，使得编写组件变得更加简单
举例说明如下：
// react17版本之前
const children1 = React.createElement("li", null, "第一个组件内容！");
const children2 = React.createElement("li", null, "第二个组件内容！");
const root = React.createElement(
"ul",
{ className: "list" },
children1,
children2
);
// react17版本之后
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const root = _jsxs("ul", {
className: "list",
children: [
_jsx("li", {
children: "Hello",
}),
_jsx("li", {
children: "World",
}),
],
});JSX 等价如下：
const root = (
- Hello
- World
);显然 JSX 写法更便于页面的编写与维护，且简单、直观。
3、JSX 书写规范
- JSX 的最外层只能有一个根元素，可以使用 div 、span 等标签
- 正常情况下，我可以在最外层包裹一个小括号（），方便我们更好的格式化代码
- JSX 中的标签可以是单标签，也可以是双标签；注意：如果是单标签，必须以/>结尾
- 在使用变量时，我们可以将其放在一个大括号中，大括号内可以放置任何有效的 JavaScript 表达式
代码示例如下：
const root = (
第一个组件内容！
{1 === 1 && 第二个组件内容！}
);4、JSX 注释
通常有以下三种注释
{/* 1、单行注释 */}
- 第一个组件内容！
// 2、行尾注释
- 第二个组件内容！
{/*
3、多行注释
1
2
3
*/}
5、JSX 嵌入变量
变量在 JSX 使用，需要用大括号 { } 包裹；注意：使用的变量需要提前定义。如下。
const MyComponent = () => {
const text = "Hello World！";
return {text};
};
export default MyComponent;6、JSX 嵌入表达式
- 运算符表达式
- 三元表达式
- 函数调用
const MyComponent = () => {
const isFinish = true;
const calc = () => {
const a = 1;
const b = 2;
return a + b;
};
return (
{/*1.运算符表达式*/}
2 + 3 的和为：{2 + 3}
{/*2.三元表达式*/}
家庭作业是否完成：{isFinish ? "是" : "否"}
{/*3.进行函数调用*/}
{calc()}
);
};
export default MyComponent;7、JSX 绑定属性
注意：在给元素绑定 style 时，外层的大括号是表示可传入变量或者表达式。而内部的大括号是一个对象，它里面是键值对，表示元素的样式属性及属性值。另外，当属性是由多个单词组成的时候，需要用驼峰命名法来表示，例如：fontSize
const MyComponent = () => {
const title = "我是标题的全部内容！";
const url = "https://www.baidu.com";
const className = "span";
return (
);
};
export default MyComponent;8、JSX 绑定事件
可以看出 React 元素的事件处理和 DOM 元素的很相似，但存在一些语法上的差异：
- React 的事件采用驼峰式命名，而不是纯小写的方式
- 使用 JSX 语法时，需要传入一个函数作为事件处理函数，而不是一个字符串
- 使用函数时不能加括号，不然会直接执行
- 如果函数过于简单，可在 JSX 中直接编写函数内容
const MyComponent = () => {
const onClick = () => {
window.alert("您点击了按钮1");
};
return (
);
};
export default MyComponent;9、JSX 条件渲染
常见的条件渲染的方式有以下三种：
- 方式一：条件判断语句，适合逻辑较多的情况
- 方式二：三元运算符，适合逻辑比较简单
- 方式三：与运算符&&，如果条件成立，渲染&&后面的组件；如果条件不成立，则都不渲染
const MyComponent = () => {
const renderTitle = (key) => {
if (key > 1) {
return 我是标题1;
}
return 我是标题2;
};
return (
{renderTitle(2)}
{2 > 1 ? 我会显示出来 : 我会隐藏}
{2 > 1 && 我会显示出来}
);
};
export default MyComponent;10、JSX 列表渲染
我们通常使用 Javascript 的 map 函数来处理 JSX 数组列表循环渲染；如下
const MyComponent = () => {
const array = ["1", "2", "3", "4"];
return (
{array.map((i) => (
- {i}
))}
);
};
export default MyComponent;注意：在渲染是，我们需要给渲染项添加一个 key，不然会报错：warning: Each child in a list should have a unique "key" prop.
key 和 React 中的 diff 算法密切相关。