react 自定义hooks

自定义的hooks

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

// 自定义Hooks
// use 开头     自定义hooks中可以使用内置hooks     抽离复用逻辑



// export 导出  api 形参

export const useInit=(api)=>{
    const [list,setList]=useState([])
    useEffect(()=>{
        axios.get(api).then((res)=>{
             setList(res.data.message);
        })
    },[])
    return [list]
}

页面中调用hooks

import React from "react";
// 引入自定hooks
import { useInit } from '../hooks'

export default function Init1() {
    // 调用自定hooks，并获取初始数据    在useInit中传入实参

  const [list] = useInit("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata")
  return <div>
    {/* 在页面渲染 */}
    {
        list.map(item => {
            return <img style={{
                width: '100%'
            }} src={item.image_src} key={item.goods_id} alt="" />
        })
    }
  </div>;
}