JSX 基础语法
本章主要包括以下内容：
- JSX 基础语法
- createElement 方法
JSX 基础语法
在 React 中，使用 JSX 来描述页面。
function App() {
return (
<div>Hello React~</div>
);
}
你可以把类似于 HTML 的代码单独提取出来，例如：
function App() {
const ele = <div>Hello React~</div>
return (
ele
);
}
注意这种类似于 HTML 的语法在 React 中称之为 JSX， 这是一种 JavaScript 的语法扩展。在 React 中推荐使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。
使用 JSX 来描述页面时，有如下的一些语法规则：
- 根元素只能有一个
- JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中
- 属性值指定为字符串字面量，或者在属性值中插入一个 JavaScript 表达式
- style 对应样式对象，class 要写作 className
- 注释需要写在花括号
- JSX 允许在模板中插入数组，数组会自动展开所有成员
createElement 方法
JSX 是一种 JavaScript 的语法扩展，Babel 会把 JSX 转译成一个名为 React.createElement 函数调用。
React.createElement(type, [props], [...children]);
参数说明：
- type：创建的 React 元素类型（可选的值有：标签名字符串、React 组件）。
- props（可?。?em>React 元素的属性。
- children（可?。?em>React 元素的子元素。
例如，下面两种代码的作用完全是相同的：
const element1 = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element2 = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。
可以看出，JSX 的本质其实就是 React.createElement 方法的一种语法糖。
轮播图案例
import React, { useEffect, useState } from "react";
import img1 from "../assets/1.jpg";
import img2 from "../assets/2.jpg";
import img3 from "../assets/3.jpg";
import img4 from "../assets/4.jpg";
import './css/swiper.css';
// 图片资源列表，可考虑使用更合适的唯一标识来作为key（比如图片路径等）
const imgList = [img1, img2, img3, img4];
export default function Swiper() {
// 当前展示轮播图的索引
const [index, setIndex] = useState(0);
// 定时器的引用
const [timer, setTimer] = useState(null);
// 轮播图切换函数，更新展示的图片索引
const swipering = () => {
setIndex(prevIndex => (prevIndex + 1) % imgList.length);
};
// 停止轮播（清除定时器）
const stop = () => {
if (timer) {
clearInterval(timer);
}
};
useEffect(() => {
const startTimer = () => {
// 设置定时器，每隔1秒切换一次轮播图
const newTimer = setInterval(() => {
try {
swipering();
} catch (error) {
console.error('轮播图切换出现错误:', error);
// 出现错误也清除定时器，避免失控
clearInterval(newTimer);
}
}, 1000);
setTimer(newTimer);
};
startTimer();
return () => {
// 组件卸载时清除定时器，避免内存泄漏等问题
if (timer) {
clearInterval(timer);
}
};
}, []);
return (
<div className="swiper" onClick={swipering} onMouseLeave={stop}>
{/* 更合适的做法可以根据图片资源本身唯一标识（如路径）设置key */}
<img src={imgList[index]} key={imgList[index]} alt="轮播图" />
</div>
);
}
-EOF-
