1.async—await:
2.相比较原生DOM 使用React 在循环渲染页面之前不需要将盒子内部清空
3.在使用React JSX渲染的顶级元素中，不可以写入其他的标签
4.JSX中规定： JSX模板必须有一个跟标签包裹，最外层不能有并列标签的存在
5.在JSX 中注释使用：“{/**/}”
6.JSX 绑定事件：区别于html规范(οnclick=“prevBtn”)，React 里面使用onClick绑定事件，事件名称不能使用字符串“prevBtn”,需要使用{prevBtn}
7.ReactDOM.render() 这个方法会将盒子里面之前的内容全部清空后，再渲染页面
8.arr.map() 在JSX中用来循环遍历数组中的元素
<script src="https://unpkg.com/react@18.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
这个html 代码里面不要出现其他的元素，出现了也会被清空
<div id="main"></div>
<script type="text/babel"></script>
(1)、封装一个函数，用来发请求，考虑到这个案例是get请求，所以参数中只写了url
async function ajaxAsync(url) {
let data = await fetch(url).then((response) => {
return response.json();
});
return data;
}
(2)、调用函数发起请求，拿到数据。但是考虑到分页，所以再次封装一个函数，用来后面分页时调用
function ajaxTool(page) {
ajaxAsync(`https://www.lanqb.com/api/course/video/indexv3?type=2&page=${page}&limit=20`).then(({ data }) => {
renderDOM(data);
});
}
(3)、在页面开始时，需要先调用这个函数，用来发出请求，并显示第一页数据
ajaxTool(1);
（4）渲染DOM
React v17的写法
function renderDOM(datas) {
let ul = (
<div>
<button id="prev" onClick={prevBtn}>
上一页
</button>
<button id="next" onClick={nextBtn}>
下一页
</button>
<ul>
{datas.map((obj) => (
<li>
<h4>课程名称:{obj.title}</h4>
<p>
<span>学习人数:{obj.study_num}</span>
<span>
关键字:{obj.tags.map((tag) => tag.label.label_name + ";")}
</span>
</p>
<p>作者:{obj.profile.nickname}</p>
</li>
))}
</ul>
</div>
);
ReactDOM.render(ul, document.getElementById("main"));
}
React v18的写法，使用V18之前要确认在头部引用的React 是18版本的
头部引用
<script src="https://unpkg.com/react@18.1.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js"></script>
渲染DOM
let root = ReactDOM.createRoot(document.getElementById("main"));//这行代码写在JS的最上方
// 渲染DOM的部分
function renderDOM(datas) {
// JSX中规定：JSX模板必须有一个根标签包裹，最外层不能有并列的标签存在。
let ul = (
<div>
<button id="prev" onClick={prevBtn}>
上一页
</button>
<button id="next" onClick={nextBtn}>
下一页
</button>
<ul>
{datas.map((obj) => (
<li>
<h4>课程名称:{obj.title}</h4>
<p>
<span>学习人数:{obj.study_num}</span>
<span>
关键字:{obj.tags.map((tag) => tag.label.label_name + ";")}
</span>
</p>
<p>作者:{obj.profile.nickname}</p>
</li>
))}
</ul>
</div>
);
// let root = ReactDOM.createRoot(document.getElementById("main"));
root.render(ul);
}
（5）写入分页函数
let curPage = 1;
function prevBtn() {
console.log("上一页");
curPage -= 1;
ajaxTool(curPage);
}
function nextBtn() {
console.log("下一页");
curPage += 1;
ajaxTool(curPage);
}
(1).在使用React 18 版本时， 如果将 下面这行代码写在了renderDOM() 函数的内部，会有警告如下图
let root = ReactDOM.createRoot(document.getElementById("main"));
警告解析：
ReactDOM.createRoot()在重复渲染新的JSX时，只需要createRoot一次即可，不需要每次渲染都去createRoot。只需调用render即可
解决办法：
将这行创建DOM的代码写在JS 外部，可以写在整个JS 的最上面，保证这个createRoot()方法值调用一次。
(2).关于行内的onclick 事件的绑定，不能使用html规范下的绑定事件的方法（如下代码），在JSX中，若是使用了html规范下的绑定方法，会有警告如下图
<button id="prev" onClick="prevBtn">
警告解析：
在JSX中事件绑定的方法是以{} 包裹的，因此显示无法绑定
**解决办法：**将代码修改成如下所示
<button id="prev" onClick={prevBtn}>
【注】：一定要注意，在JSX中onclick的时间绑定时，要写成 onClick 这是JSX的语法规范
分页展示
