React Hook第六篇----自定义hooks

🚀🚀首发:碰磕Study，努力学习⑧

---

🌞🌞🌞天晴

---

✊✊阳光明媚Study....

---

📅2022/6/16

---

自定义hooks

必须以"use"开头,因为这是React检查的约定

• 将某个功能模块单独进行封装,能实现代码复用以及代码整洁,清晰明了

使用

import axios from "axios";
import React, { useEffect, useMemo, useState } from "react";
function useCinemaList(){
    const [cinemaList,setcinemaList] =useState([])
    //电影院信息
    useEffect(()=>{
        //请求数据
        axios({
            method:'GET',
            url:"https://m.maizuo.com/gateway?cityId=440300&ticketFlag=1&k=2005318",
            headers:{
                "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.0","e":"1654433035923688551579649"}',
                "X-Host": "mall.film-ticket.cinema.list"
            }    
        }).then(res=>{
        // console.log(res.data.data.cinemas)
        setcinemaList(res.data.data.cinemas)
        })
    },[])
    return{
        cinemaList
    }
}
function useFilter(cinemaList,mytext){

    const getCinemaList=useMemo(()=>cinemaList.filter(item=>{
        //统一转大写
        return item.name.toUpperCase().includes(mytext.toUpperCase())||item.address.toUpperCase().includes(mytext.toUpperCase())
    }),[cinemaList,mytext])
    return{
        getCinemaList
    }
}
function MyCinema(){
    
    const [mytext,setmytext] =useState("")
    const {cinemaList}=useCinemaList()
    const {getCinemaList}=useFilter(cinemaList,mytext)
    return(
        <div>
            <input value={mytext} onChange={(e)=>{
               setmytext(e.target.value)
            }}></input>
            {
                getCinemaList.map(item=>
                <dl key={item.cinemaId}>
                    <div>{item.name}</div>
                    <div>{item.address}</div>
                </dl>
                )
            }
        </div>
    )
}

export default MyCinema

完成----