体验小程序React hook——实现列表加载

最新推荐文章于 2024-06-27 13:38:45 发布

ZhengKehang

最新推荐文章于 2024-06-27 13:38:45 发布

阅读量706

点赞数

分类专栏：学习经验文章标签： reactjs hooks 小程序

本文链接：https://blog.csdn.net/ZhengKehang/article/details/114372148

版权

本文介绍了如何在基于Taro框架的小程序中利用React Hooks实现列表加载功能，包括下拉刷新、上拉加载、加载截流及空状态处理。通过分析功能需求、设计实现方案，并逐步优化，如增加搜索和筛选功能。文章还分享了在实现过程中遇到的问题和解决方案。

摘要由CSDN通过智能技术生成

体验小程序React hook——实现列表加载

基于Taro框架

函数页面配置

function TestPage() {
   
}
TestPage.config = {
   
//在这里配置小程序页面相关内容
}
export default TestPage

函数组件配置

function TestCom(props) {
   
}
TestCom.options = {
   
    addGlobalClass: true
}
export default TestCom

数据加载

const [list, setList] = useState([])
useEffect( async () => {
   
    let data = await getData()
    setList(data)
}, [])//传空数组模拟componentDidMount 功能

写一个列表加载组件

功能分析

空状态
下拉刷新
上拉加载
加载完成提示
加载截流

实现方案

使用小程序的下拉刷新和上拉加载功能
抽象空状态组件
自定义effect抽象加载方案

列表组件代码 1.0

import {View} from "@tarojs/components";
import Empty from "../empty";

function List(props) {
    const { listTotal, listLength, emptyTip, children } = props
    let isEmpty = listLength === 0
    let isLast = listLength >= listTotal
    return (
        <View>
            {
                children//列表内容
            }
            {
                isEmpty//列表为空时显示
                &&
                <Empty title={emptyTip} />
            }
            
            {
                !isEmpty && isLast//非空状态加载完毕显示
                &&
                <View className='paddingY30 color-5 font-size-4 text-align-center'>我也是有底线的</View>
            }
        </View>
    )
}

List.options = {
    addGlobalClass: true
}

export default List

useGetList 1.0 实现下拉加载


import Taro, {
   useEffect, useReachBottom, useState} from "@tarojs/taro";

export default function useGetList(getList) {
   //接收数据加载方法为参数
    if (!getList) return []
    const [list, setList] = useState([]);//列表数据
    const [page, setPage] = useState(1);//列表页
    useEffect(async ()=>{
   
        try {
   
            let {
   list: listGet} = await getList(page)
            let newList =  page === 1 ? listGet : [...list, ...listGet]
            setList(newList)//更新列表
        } catch (e) {
   
            console.log(e)
        }
    }, [page])//页数改变的时候执行

    useReachBottom(()