react学习：自定义hook

问题导向

react自定义hook

如果你都有了答案，可以忽略本文章，或去react学习地图寻找更多答案

---

自定义hook（封装）

类型：函数
作用：逻辑复用，本质是函数，可以多次调用
语法：名称以use开头，函数内部可以调用其他的Hook

简单例子

一个获取年龄的自定义Hook

import {
   useState, useEffect} from 'react';

function useAge(){
   
    const [age, setAge] = useState(0)
    useEffect(() => {
   
        模拟异步操作
        setTimeout(() => {
   
            setAge(20)
        },2000)
    })
    return age
}

function App(){
   
	const age = useAge()
	
	return (
        <>
            <div>
                {
   
                   <p>年龄：{
   age ? age : 'loading...'}</p>
                }
            </div>
        </>
    )
}

---

复杂例子

实现滚动加载分页 + 图片懒加载

实现逻辑：当页面上拉到某个节点时（需要监听元素），根据分页发送请求
比如：商品列表，一次请求有10条数据，当上拉到第10条时，再次发生请求，加载更多的数据

实现3个hook

一个可以监听元素进入可视区域的hook
一个可以根据分页发送请求的hook
一个图片懒加载hook

---

一个可以根据分页发送请求的hook

小知识点：useState的改变函数可以传递给其他函数，让其修改值，在这里传递给Http封装好的函数，请求成功再修改值

import {
    useEffect, useState } from 'react'
import {
    Http } from '@/utils'

export default function useHttpHook({
   
    url,
    method = 'post',
    headers,
    body = {
   },
    watch = []
}) {
   
    const [result, setResult] = useState()  传递给Http，得到结果时设置result
    const [loading, setLoading] = useState(true)  传递给Http，请求开始时设置为true，请求结束时设置为false

    useEffect(() => {
   
        Http({
   
            url,
            method,
            headers,
            body,
            setResult,
            setLoading
        })
    }, watch)

    return [result, loading]
}

http封装

import {
    Toast } from 'antd-mobile';

export default function Http({
   
  url,
  method = 'post'