05-React渲染数据案例

React渲染数据案例—蓝铅笔课程分页展示

一、思路

1. 获取第三方接口，由于会跨域，所以需要安装浏览器的扩展（为了不搭建后端服务器）
2. 向接口发起请求，拿到数据
3. 将数据渲染到页面中

二、相关知识点

1.async—await:

• async/await是Promise的语法糖，
• 他能实现的效果都可以用then链来实现，就是说，它是为了优化then链而开发出来的，
• 从字面上来看 async是"异步"的简写，await 译为等待，所以可以理解 由 async声明的function是异步的，await等待某个操作完成。
• 在语法上强制规定，await只能出现在async函数中。

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中用来循环遍历数组中的元素

三、代码示例

1.引入React和babel

<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>

2.HTML 代码

这个html 代码里面不要出现其他的元素，出现了也会被清空

<div id="main"></div>

3.JS代码

3.1 设置类型，使得JSX代码被识别

 <script type="text/babel"></script>

3.2 详细代码

(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);
      }

4.注意事项

(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的语法规范

四、结果展示

分页展示