react 函数组件案例

函数组件案例（蓝铅笔）

一、思路

1. 向第三方接口发起请求，获取数据。
2. 将数据渲染到页面中

二、相关知识点

• async-await 进行封装函数

• 通过函数封装组件，内部声明组件，会造成组件重复创建的问题。测试：设置一个定时器，可以发现，每次定时器执行，都在声明新的函数组件，同时，ReactDOM.render()也在重复的渲染新创建的组件。

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kd1a3fri-1653999495022)(结果展示图/函数组件案例注意1.jpg)]

• ReactDOM.render(,document.getElementById(“main”)); 相当于性能创建了一个实例，所以会重新渲染。

• arr.map();可以循环遍历数组中的元素。

• 在JSX中绑定事件，想要传递参数时，需要使用匿名函数 如下图

三、代码示例

1.引入react和babel，并设置相关类型

2.HTML代码

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

3.JS 代码

(1).封装一个发送ajax请求的函数

async function ajaxAsync(url) {
      let promise = await fetch(url).then((response) => {
          return response.json();
        });
        return promise;
      }

(2).发送ajax请求，获取到导航的数据，并将导航的数据保存到一个全局变量中。在下面获取数据时发现，有了数据冲突，为了解决冲突的问题，使用了全局变量，如果只发送一次请求，可以不声明全局变量，直接通过调用函数传递参数

ajaxAsync(
        "https://www.lanqb.com/api/course/course-group-list?course_style=1"
      ).then(({ course_style }) => {
        console.log("course_style----", course_style);
        // 获取到数据后 将数据保存在全局变量中
        globalNavDatas = course_style;
       
      });

（3）发送ajax 请求，获取到课程的数据，将页面进行初始化，并且以调用函数的方式传递数据。

async function getCourses(id) {
   let { data: courses } = await ajaxAsync(
      `https://www.lanqb.com/school/professional?status=show&limit=20&page=1&course_style_ids=${id}&weight=desc`
        );
        renderDOM({ type: "course", datas: courses });
      }
       //   进行初始化 调用这个接口，不传递参数
      getCourses("");

（4）声明一个渲染DOM的函数，用来接收请求返回的数据，渲染到页面中。在这个函数中，

• 包含按钮的点击事件，以id作为参数。
• 声明导航条函数组件
• 声明课程组件
• 声明根组件

function renderDOM(source) {
 //   按钮点击事件:
        function btnClick(id) {
          console.log(id);
          getCourses(id);
        }
        console.log("datas---", source);
// 声明导航条函数组件
        function NavCates() {
          return (
            <div className="nav">
              <button onClick={()=>btnClick("")>全部</button>
              {/* 这样可以循环遍历数据，生成多个 button，通过datas.map()  */}
              {globalNavDatas.map(
                (nav) => (
                  console.log("nav----", nav), 
                  (
                    <button onClick={() => btnClick(nav.id)}>
                      {nav.style_title}
                    </button>
                  )
                )
              )}
            </div>
          );
        }
// 声明课程组件
        function Course(props) {
          return (
            <div className="course">
              <h3>{props.title}</h3>
            </div>
          );
        }
 // 声明根组件
        function Root() {
          return (
            <div className="root">
              <NavCates></NavCates>
              {source &&
                source.datas.map((c) => <Course title={c.title}></Course>)}
            </div>
          );
        }
        ReactDOM.render(<Root></Root>, document.getElementById("main"));
      }

四、结果展示