自定义hooks

自定义hooks

简单来讲自定义hooks就是把逻辑抽离出来，提取到第三个函数中，当需要使用时可直接调取函数拿到返回值，可进行传参
注意：必须以use开头
示例如下：

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

function useCinemaList(){
    const [cinemaList,setcinemaList] = useState([])

    useEffect(()=>{
        axios({
            url:"https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159",
            method:'get',
            headers:{
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',
                
                'X-Host': 'mall.film-ticket.cinema.list'

            }
        }).then(res=>{
            setcinemaList(res.data.data.cinemas)
        })
    },[])
    return {
        cinemaList
    }
}

function useFilter(cinemaList,mytext){
    const getCinemaList = useMemo(()=>
        cinemaList.filter(item=>item.name.toUpperCase().includes(mytext.toUpperCase()) || 
        item.address.toUpperCase().includes(mytext.toUpperCase())
        ),[cinemaList,mytext])

        return {
            getCinemaList
        }
}

export default function Cinema () {
    const [mytext,setmytext] = useState('')

    const {cinemaList} = useCinemaList()

    const {getCinemaList} = useFilter(cinemaList,mytext)
    return <div>
        <input value={mytext} onChange={
        (evt)=>{
            setmytext(evt.target.value)
        }
        }/>
        {
            getCinemaList.map(item=>
                <dl key={item.cinemaId}>
                    <dt>{item.name}</dt>
                    <dd>{item.address}</dd>
                </dl>
                )
        }
    </div>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58