React 基础案例 | 提醒列表和旅游清单列表（一）

古城微笑少年丶 2023-01-23 12:48 75阅读 0赞

![5aa7272e9ddb04cbcc141a48d89d567f.png][]

## 一、开篇 ##

大家好，本系列文章小编将和大家一起，从最基础的真实案例实践 React Hook 相关的知识，如果你已经很熟练了 React Hook 相关内容了，本系列文章你可以忽略。

本系列文章由浅入深，将从最简单的案例开始学习，本篇文章将从两个列表的数据渲染开始讲起，一个是从本地文件获取数据、另一个通过接口请求的方式获取数据。

## 二、案例1：生日列表加载本地数据 ##

如下图所示，本案例从本地数据加载生日列表数据，列表数据包含了用户的头像、姓名、年龄，同时又包含了一个清除数据的按钮。

![9c1f3a1282d264394af3b4465e500ab6.png][]

### 2.1、创建项目 ###

开始之前，我们通过 create-react-app 命令创建项目 birthday-reminder，删除一些不相关的文件，保留 App.js、index.css、index.js，index.js 的文件内容修改如下：

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
    
    // src/index.js

### 2.2、设计本地文件数据结构 ###

本案例的数据结构比较简单，一个数组对象，包含 id、name（姓名）、age（年龄）、image（图片地址），新建 data.js 数据文件，示例结构如下：

export default [
      {
        id: 1,
        name: 'Bertie Yates',
        age: 29,
        image:
          'https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-2_ipcjws.jpg',
      },
      {
        id: 2,
        name: 'Hester Hogan',
        age: 32,
        image:
          'https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-3_rxtqvi.jpg',
      },
      //更多数据...
    ]
    
    // src/data.js

### 2.3、新建本地样式文件 ###

基于页面，我们新建 index.css 文件，定义基础的颜色和常用的尺寸变量等，由于代码比较简单，这里就不过多解释啦，直接贴上代码

/*
    =============== 
    Variables
    ===============
    */
    
    :root {
      /* dark shades of primary color*/
      --clr-primary-1: hsl(162, 61%, 89%);
      --clr-primary-2: hsl(162, 60%, 78%);
      --clr-primary-3: hsl(162, 61%, 67%);
      --clr-primary-4: hsl(162, 61%, 57%);
      /* primary/main color */
      --clr-primary-5: hsl(162, 73%, 46%);
      /* lighter shades of primary color */
      --clr-primary-6: #1aa179;
      --clr-primary-7: #13795b;
      --clr-primary-8: #0d503c;
      --clr-primary-9: #06281e;
      /* darkest grey - used for headings */
      --clr-grey-1: hsl(212, 33%, 89%);
      --clr-grey-2: hsl(210, 31%, 80%);
      --clr-grey-3: hsl(211, 27%, 70%);
      --clr-grey-4: hsl(209, 23%, 60%);
      /* grey used for paragraphs */
      --clr-grey-5: hsl(210, 22%, 49%);
      --clr-grey-6: hsl(209, 28%, 39%);
      --clr-grey-7: hsl(209, 34%, 30%);
      --clr-grey-8: hsl(211, 39%, 23%);
      --clr-grey-9: hsl(209, 61%, 16%);
      --clr-white: #fff;
      --clr-red-dark: hsl(360, 67%, 44%);
      --clr-red-light: hsl(360, 71%, 66%);
      --clr-green-dark: hsl(125, 67%, 44%);
      --clr-green-light: hsl(125, 71%, 66%);
      --clr-black: #222;
      --transition: all 0.3s linear;
      --spacing: 0.1rem;
      --radius: 0.25rem;
      --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
      --max-width: 1170px;
      --fixed-width: 450px;
      --clr-pink: #f28ab2;
    }
    /*
    =============== 
    Global Styles
    ===============
    */
    
    *,
    ::after,
    ::before {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      background: var(--clr-pink);
      color: var(--clr-grey-9);
      line-height: 1.5;
      font-size: 0.875rem;
    }
    ul {
      list-style-type: none;
    }
    a {
      text-decoration: none;
    }
    h1,
    h2,
    h3,
    h4 {
      letter-spacing: var(--spacing);
      text-transform: capitalize;
      line-height: 1.25;
      margin-bottom: 0.75rem;
    }
    h1 {
      font-size: 3rem;
    }
    h2 {
      font-size: 2rem;
    }
    h3 {
      font-size: 1.25rem;
    }
    h4 {
      font-size: 0.875rem;
    }
    p {
      margin-bottom: 1.25rem;
      color: var(--clr-grey-5);
    }
    @media screen and (min-width: 800px) {
      h1 {
        font-size: 4rem;
      }
      h2 {
        font-size: 2.5rem;
      }
      h3 {
        font-size: 1.75rem;
      }
      h4 {
        font-size: 1rem;
      }
      body {
        font-size: 1rem;
      }
      h1,
      h2,
      h3,
      h4 {
        line-height: 1;
      }
    }
    /*  global classes */
    
    /* p */
    .p {
      width: 90vw;
      margin: 0 auto;
      max-width: var(--max-width);
    }
    
    @media screen and (min-width: 992px) {
      .p {
        width: 95vw;
      }
    }
    
    main {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .container {
      width: 90vw;
      margin: 5rem 0;
      max-width: var(--fixed-width);
      background: var(--clr-white);
      border-radius: var(--radius);
      padding: 1.5rem 2rem;
      box-shadow: var(--dark-shadow);
    }
    .container h3 {
      font-weight: normal;
      text-transform: none;
      margin-bottom: 2rem;
    }
    .person {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 0.75rem;
      margin-bottom: 1.5rem;
      align-items: center;
    }
    .person img {
      width: 75px;
      height: 75px;
      object-fit: cover;
      border-radius: 50%;
      box-shadow: var(--light-shadow);
    }
    .person h4 {
      margin-bottom: 0.35rem;
    }
    .person p {
      margin-bottom: 0;
    }
    .container button {
      color: var(--clr-white);
      display: block;
      width: 100%;
      border-color: transparent;
      background: var(--clr-pink);
      margin: 2rem auto 0 auto;
      text-transform: capitalize;
      font-size: 1.2rem;
      padding: 0.5rem 0;
      letter-spacing: var(--spacing);
      border-radius: var(--radius);
      outline: 1px solid rgba(242, 138, 178, 0.8);
      cursor: pointer;
    }
    
    /*
    /src/index.css
    */

### 2.4、设计 List 列表组件 ###

接下来我们新建 List.js 组件，用来展示用户的列表信息，组件定义了 people 属性，用于接收 data 的数据，进行渲染列表数据。

我们使用 map 函数渲染列表数据， 同时使用 const \{id,name,age,image\} =person 来结构化 person的属性，示例代码如下：

import React from 'react';
    
    const List = ({people}) => {
      return (
        <>
            {
                people.map((person)=>{
                    const {id,name,age,image} =person;
                    return(
                      <article key={id} className='person'>
                          <img src={image} alt={name}/>
                          <div>
                              <h4>{name}</h4>
                              <p>{age} 岁</p>
                          </div>
                      </article>
                    );
                })
            }
        </>
      );
    };
    
    export default List;
    
    // src/List.js

### 2.5、加载数据，渲染 LiST 列表数据 ###

最后我们需要在 App.js 文件里，加载 data.js 中的数据，这里我们使用 state hook 函数加载 data.js 文件中的数据，定义 people 数据状态变量接收 data 数据，将其传至 List 列表中的 people 属性中渲染列表数据。最后我们添加清除按钮，使用 setPeople(\[\]) 方法，将列表的数据清空，界面将会重新 re-render，示例代码如下：

import React, { useState } from 'react';
    import data from './data';
    import List from './List';
    function App() {
      const [people,setPeople] = useState(data);
      return (
          <main>
            <p className='container'>
              <h3>今日 {people.length} 人过生</h3>
              <List people={people}/>
              <button onClick={()=>setPeople([])}> 清除数据</button>
            </p>
          </main>
      );
    }
    
    export default App;
    
    // src/app.js

点击清除按钮后的效果

![95977d9550ecd18cb64d4b27e37a974d.png][]

到这里，本案例就完成了，是一个很基础的示例，但是列表加载数据是一个很常用的场景，值得多多练习。

## 三、案例2：旅游清单列表请求接口加载数据 ##

首先描述相关需求：

1.  此案例通过接口请求数据，加载过程中，显示 Loading 状态，加载完成后显示旅游相关的图片、文章的标题、文章的描述、价格；
2.  文字描述过长时，则会自动省略，点击 Read More 查看完整的介绍；
3.  如果用户不敢兴趣的话，可以点击 not interested 按钮进行移除；
4.  如果列表内容都被移除，显示 refresh 刷新按钮，点击后，重新加载旅游清单数据。

具体交互，如下视频所示：

### 3.1、 创建项目 ###

开始之前，我们通过 create-react-app 命令创建项目 tours，删除一些不相关的文件，保留 App.js、index.css、index.js，index.js 文件内容如下：

### 3.2、设计接口对象数据 ###

基于界面展示的需求，我们的接口数据需要返回一个数组对象，包含：id（主键）、name（标题）、info（信息）、image（图片）、price（价格），本篇示例，提供一个 https://course-api.com/react-tours-project 接口地址，返回如下数据：

![7ddddf18e214b3d44acd58d4cc23ff50.png][]

### 3.3、创建 index.css 样式 ###

基于界面样式，我们新建 index.css 样式文件，由于代码比较简单，这里只是贴上相关代码，代码如下所示：

/*
    =============== 
    Variables
    ===============
    */
    
    :root {
      /* dark shades of primary color*/
      --clr-primary-1: hsl(205, 86%, 17%);
      --clr-primary-2: hsl(205, 77%, 27%);
      --clr-primary-3: hsl(205, 72%, 37%);
      --clr-primary-4: hsl(205, 63%, 48%);
      /* primary/main color */
      --clr-primary-5: hsl(205, 78%, 60%);
      /* lighter shades of primary color */
      --clr-primary-6: hsl(205, 89%, 70%);
      --clr-primary-7: hsl(205, 90%, 76%);
      --clr-primary-8: hsl(205, 86%, 81%);
      --clr-primary-9: hsl(205, 90%, 88%);
      --clr-primary-10: hsl(205, 100%, 96%);
      /* darkest grey - used for headings */
      --clr-grey-1: hsl(209, 61%, 16%);
      --clr-grey-2: hsl(211, 39%, 23%);
      --clr-grey-3: hsl(209, 34%, 30%);
      --clr-grey-4: hsl(209, 28%, 39%);
      /* grey used for paragraphs */
      --clr-grey-5: hsl(210, 22%, 49%);
      --clr-grey-6: hsl(209, 23%, 60%);
      --clr-grey-7: hsl(211, 27%, 70%);
      --clr-grey-8: hsl(210, 31%, 80%);
      --clr-grey-9: hsl(212, 33%, 89%);
      --clr-grey-10: hsl(210, 36%, 96%);
      --clr-white: #fff;
      --clr-red-dark: hsl(360, 67%, 44%);
      --clr-red-light: hsl(360, 71%, 66%);
      --clr-green-dark: hsl(125, 67%, 44%);
      --clr-green-light: hsl(125, 71%, 66%);
      --clr-black: #222;
      --transition: all 0.3s linear;
      --spacing: 0.1rem;
      --radius: 0.25rem;
      --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      --max-width: 1170px;
      --fixed-width: 620px;
    }
    /*
    =============== 
    Global Styles
    ===============
    */
    
    *,
    ::after,
    ::before {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      background: var(--clr-grey-10);
      color: var(--clr-grey-1);
      line-height: 1.5;
      font-size: 0.875rem;
    }
    ul {
      list-style-type: none;
    }
    a {
      text-decoration: none;
    }
    h1,
    h2,
    h3,
    h4 {
      letter-spacing: var(--spacing);
      text-transform: capitalize;
      line-height: 1.25;
      margin-bottom: 0.75rem;
    }
    h1 {
      font-size: 3rem;
    }
    h2 {
      font-size: 2rem;
    }
    h3 {
      font-size: 1.25rem;
    }
    h4 {
      font-size: 0.875rem;
    }
    p {
      margin-bottom: 1.25rem;
      color: var(--clr-grey-5);
    }
    @media screen and (min-width: 800px) {
      h1 {
        font-size: 4rem;
      }
      h2 {
        font-size: 2.5rem;
      }
      h3 {
        font-size: 1.75rem;
      }
      h4 {
        font-size: 1rem;
      }
      body {
        font-size: 1rem;
      }
      h1,
      h2,
      h3,
      h4 {
        line-height: 1;
      }
    }
    /*  global classes */
    
    /* p */
    .p {
      width: 90vw;
      margin: 0 auto;
      max-width: var(--max-width);
    }
    
    @media screen and (min-width: 992px) {
      .p {
        width: 95vw;
      }
    }
    .btn {
      background: var(--clr-primary-5);
      display: inline-block;
      padding: 0.25rem 0.5rem;
      border-radius: var(--radius);
      text-transform: capitalize;
      color: var(--clr-white);
      letter-spacing: var(--spacing);
      border-color: transparent;
      cursor: pointer;
      margin-top: 2rem;
      font-size: 1.2rem;
    }
    /*
    =============== 
    Tours
    ===============
    */
    main {
      width: 90vw;
      max-width: var(--fixed-width);
      margin: 5rem auto;
    }
    .loading {
      text-align: center;
    }
    .title {
      text-align: center;
      margin-bottom: 4rem;
    }
    .underline {
      width: 6rem;
      height: 0.25rem;
      background: var(--clr-primary-5);
      margin-left: auto;
      margin-right: auto;
    }
    
    .single-tour {
      background: var(--clr-white);
      border-radius: var(--radius);
      margin: 2rem 0;
      box-shadow: var(--light-shadow);
      transition: var(--transition);
    }
    .single-tour:hover {
      box-shadow: var(--dark-shadow);
    }
    .single-tour img {
      width: 100%;
      height: 20rem;
      object-fit: cover;
      border-top-right-radius: var(--radius);
      border-top-left-radius: var(--radius);
    }
    .tour-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
    }
    .tour-info h4 {
      margin-bottom: 0;
    }
    .single-tour button {
      background: transparent;
      border-color: transparent;
      text-transform: capitalize;
      color: var(--clr-primary-5);
      font-size: 1rem;
      cursor: pointer;
      padding-left: 0.25rem;
    }
    .tour-price {
      color: var(--clr-primary-5);
      background: var(--clr-primary-10);
      padding: 0.25rem 0.5rem;
      border-radius: var(--radius);
    }
    .single-tour footer {
      padding: 1.5rem 2rem;
    }
    .single-tour .delete-btn {
      display: block;
      width: 200px;
      margin: 1rem auto 0 auto;
      color: var(--clr-red-dark);
      letter-spacing: var(--spacing);
      background: transparent;
      border: 1px solid var(--clr-red-dark);
      padding: 0.25rem 0.5rem;
      border-radius: var(--radius);
    }
    
    /*
      src/index.css
    */

### 3.4、创建加载 Loading 组件 ###

在数据请求阶段，我们需要给用户一个数据正在加载中的状态提示，此时我们需要新建一个 Loading 的组件，代码比较简单，新建一个 Loading.js 的文件，示例代码如下：

import React from 'react';
    
    const Loading = () => {
      return (
        <div className="loading">
          <h1>loading...</h1>
        </div>
      );
    };
    
    export default Loading;
    
    // src/Loading.js

### 3.5、创建清单 Tour 卡片组件 ###

由于清单列表中单个卡片的内容比较多，比如清单的图片、标题、描述信息展示以及 readMore 操作按钮查看完整的信息描述、点击 not interested 移除卡片清单，因此我们要单独创建 Tour.js 卡片组件。

这里我们为组件定义 id，image（图片）,info（信息）,name（标题）,price（价格）,removeTour（移除事件属性），同时我们定义 readMore 状态（state hook）用来显示或省略详情内容。

import React, { useState } from 'react';
    
    const Tour = ({id,image,info,name,price,removeTour}) => {
      const [readMore,setReadMore] = useState(false);
      return (
          <article className="single-tour">
            <img src={image} alt={name}/>
            <footer>
              <div className="tour-info">
                <h4>{name}</h4>
                <h4 className="tour-price">${price}</h4>
              </div>
              <p>
                {readMore ? info:`${info.substring(0,200)}...`}
                <button onClick={()=>setReadMore(!readMore)}>
                    {readMore?'show less':'read more'}
                </button>
              </p>
              <button className='delete-btn' onClick={()=>removeTour(id)}>
                  not interested
              </button>
            </footer>
          </article>
      );
    };
    
    export default Tour;
    
    // src/Tour.js

### 3.6、创建 Tours 列表组件 ###

接下来我们创建卡片清单列表，新建 Tours.js 文件，列表组件定义 tours, removeTour 两个属性，tours 属性用于接收父组件传递的数据，removeTour 事件用于删除对应的清单。列表组件通过数组的 map 函数迭代 Tour 卡片组件，渲染父组件传过来的 Data 属性，示例代码如下：

import React from 'react';
    import Tour from './Tour';
    const Tours = ({tours, removeTour}) => {
      return (
          <p>
            <div className="title">
              <h2>our tours</h2>
              <div className="underline"></div>
            </div>
            <div>
              {tours.map((tour)=>{
                return <Tour key={tour.id} {...tour} removeTour={removeTour} />;
              })}
            </div>
          </p>
      );
    };
    
    export default Tours;
    // src/Tours.js

### 3.7、完善 App.js 界面 ###

最后我们完善 App.js 界面，引入 Tours 组件，按照以下思路编写：

*  定义接口地址 URL 变量，https://course-api.com/react-tours-project
 *  定义加载数据状态和清单数据状态（state hook）：loading 和 tours，用来显示加载状态和渲染接口的数据
 *  定义 removeTour 事件，使用 filter 属性删除对应清单。
 *  接下来定义接口请求方法 fetchTours，使用 async，await 方式请求接口，通过 useEffect Hook 调用 fetchTours 方法，最后别忘记 useEffect 的第二个参数 \[\] 为空数组，只加载一次；
 *  最后使用条件语句，判断数据是否加载中，显示 Loading 组件；接口请求完成时，调用 Tours 组件，显示清单列表；如果清单列表为空，显示 refresh 重新加载数据的按钮，点击时，重新请求接口加载数据；

基于以上的思路，完成后的代码如下所示：

import React, { useState, useEffect } from 'react'
    import Loading from './Loading'
    import Tours from './Tours'
    // ATTENTION!!!!!!!!!!
    // I SWITCHED TO PERMANENT DOMAIN
    const url = 'https://course-api.com/react-tours-project'
    function App() {
      const [loading,setLoading]=useState(true);
      const [tours,setTours]=useState([]);
    
      const removeTour = (id)=>{
        const newTours = tours.filter((tour)=> tour.id !==id);
        setTours(newTours);
      }
    
      const fetchTours = async ()=>{
        setLoading(true);
        try {
          const response = await fetch(url);
          const tours=await response.json();
          setLoading(false);
          setTours(tours);
        } catch (error) {
          setLoading(false);
          console.log(error);
        }
      }
    
      useEffect(()=>{
        fetchTours()
      },[])
    
      if(loading){
        return (
            <main>
              <Loading/>
            </main>
        )
      }
    
      if(tours.length===0){
        return (
            <main>
              <div className='title'>
                <h2>no tours left</h2>
                <button className='btn' onClick={()=>fetchTours()}>
                  refresh
                </button>
              </div>
            </main>
        )
      }
    
      return (
          <main>
            <Tours tours={tours} removeTour={removeTour}/>
          </main>
      )
    }
    
    export default App

到这里，本案例相关所有的代码就完成了，是不是很简单呢。

## 结束语 ##

今天的两个实例就介绍这里，虽然简单，但是在实际应用场景又很常见，大家还是有必要亲自动手练习的，如果你想获取本案例源码，请关注“前端达人”公众号，回复“b1”，感谢你的阅读。

## 相关阅读 ##

[React Hooks 学习笔记 | State Hook（一）][React Hooks _ _ State Hook]

[React Hooks 学习笔记 | useEffect Hook（二）][React Hooks _ _ useEffect Hook]

[5aa7272e9ddb04cbcc141a48d89d567f.png]: /images/20221004/6210f24f3ff743cf987dc40e389295e7.png
[9c1f3a1282d264394af3b4465e500ab6.png]: /images/20221004/5318e15fc2064085a8d42a324c4aa861.png
[95977d9550ecd18cb64d4b27e37a974d.png]: /images/20221004/4c90a5ea86fa45cfa8dbdf46da120ab0.png
[7ddddf18e214b3d44acd58d4cc23ff50.png]: /images/20221004/6ffc9ed7eed94b4593dd1ab8690fa068.png
[React Hooks _ _ State Hook]: http://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw%3D%3D&chksm=a6a6f08691d179908741af113e3908d4b4523b451abe9585ef7c0eeb27900973aad370cc32a7&idx=1&mid=2247492410&scene=21&sn=d01e135fae1e4406526b48e7bb490482#wechat_redirect
[React Hooks _ _ useEffect Hook]: http://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw%3D%3D&chksm=a6a6f6fd91d17feb52833cadc9c8343fa1d5c3a2bba3f72a432b849aaa07d94ab587ef7c2ecf&idx=1&mid=2247492929&scene=21&sn=e3a4a2f195be18757f4b397cc2ecfc23#wechat_redirect