自定义hooks

1、Hook 是一个函数

规则：

1）、函数名必须以use开头。并且是小驼峰（use后面的首字母需要大写）

2）、在自定义hooks里可以使用其它hooks。（普通函数里不能调用hooks）；

3）、hooks 只能在其它hooks或者函数式组件里使用。

2、四个使用场景

• 抽离业务逻辑层；

• 封装通用逻辑

• 监听浏览器状态

• 拆分复杂组件。

示例一

封装发送请求

import axios from 'axios';
import React,{useEffect, useState} from 'react'

// 自定义hooks（钩子函数）：
// 规则：
// 1）、函数名必须以use开头。并且是小驼峰（use后面的首字母需要大写）
// 2）、在自定义hooks里可以使用其它hooks。（普通函数里不能调用hooks）；
// 3）、hooks 只能在其它hooks或者组件里使用。

function useBanners(){
   const [banners,setBanners] = useState([]);

    useEffect(()=>{
        axios.get("http://121.89.205.189:3000/api/banner/list")
        .then(res=>{
            if(res.data.code=="200"){
                setBanners(res.data.data);
            }
        })
    },[])
    return banners;
}

export default function() {
    
  const banners = useBanners();  

  return (
    <>
        <div>CustomHooks</div>
        <ul>
            {
                banners.map((item,index)=>(
                    <li key={index}>
                        <p>{item.bannerid}</p>
                    </li>
                ))
            }
        </ul>
    </>
  )

}

示例二

把自定义hooks单独写在一个模块里。

./src/myhooks.js

import {useEffect,useState} from "react";
import {getProListApi} from "../api/pro.js"

// 获取数据
export function usePro() {
    // 页码：
    const [count, setCount] = useState(1);
    // 每页条数：
    const [limitNum, setLimitNum] = useState(10);
    // 产品列表
    const [list, setlist] = useState([]);
    useEffect(() => {
        getProListApi({
            limitNum,
            count
        }).then(res => {
            if (res.code == "200") {
                setlist(res.data);
            }
        })
    }, [count, limitNum]);

    return {
        list,
        count,setCount,
        limitNum,setLimitNum
    }
}

//组件里使用自定义hooks

import React from 'react';
import {usePro} from "../../../../myhooks"

export default function () {
    const {list,count,setCount,limitNum,setLimitNum} = usePro();
    return (
        <>
            <div>CustomHooks002</div>
            第<input type="text" value={count} onChange={(ev) => setCount(ev.target.value)} />页
            每页 <input type="text" value={limitNum} onChange={(ev) => setLimitNum(ev.target.value)} />条数据
            <ul>
                {
                    list.map(item => (
                        <li>
                            <p>{item.proid}</p>
                        </li>
                    ))
                }
            </ul>
        </>
    )
}