【学习打卡】第6天 React Hooks学习3

课程名称：RN入门到进阶，打造高质量上线App(2022全新升级)

课程章节：2-10 React Native Hooks开发指南

主讲老师：CrazyCodeBoy

课程内容：今天学习的主要内容包括：如何实现自定义hook。结合官网，对hooks进行深入的了解

课程收获：

熟悉React自定义hook的书写

目的：通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。

在之前使用Effect Hook的时候，我们是发送请求，然后得到数据，在显示在页面上。

现在，有一个组件3也需要获取本月星期数，然后显示在页面上，如果是之前的话，我们可以直接复制组件2的代码。

import { useEffect, useState } from "react"

/*tsModel0*/
export type tsModel0 = {
    date: number;
    weekend: number;
    date_cn: string;
    weekend_cn: string;
}

const Test3 = () => {

    const [data, setData] = useState<tsModel0[]>([]);

    useEffect(() => {
        fetch("https://api.apihubs.cn/holiday/get?field=weekend,date&cn=1&size=31").then(res => res.json()).then(res => {
            setData(res.data.list)
        })
        return () => {
            setData([])
        }
    }, [])

    return (
        <div>
            {data.map(item => <p>{item.date_cn}{item.weekend_cn}</p>)}
        </div>
    )
}

export default Test3;

很显然，这并不是理想的解决方案，像中间发送请求，获取数据的这块，完全是可以进行复用和共享逻辑的。

提取自定义Hook

当我们在想在两个函数之间共享逻辑时，我们可以把它提取到第三个函数中，正好组件和hook都是函数，所以也可以这样操作。

自定义Hook是一个函数，其名称以use开头，函数内部可以调用其他的Hook。

以上内容来自官网：https://react.docschina.org/docs/hooks-custom.html

那么现在就可以封装一个获取接口数据的hooks了。

新建useWeekData.tsx文件

示例：

import { useEffect, useState } from "react";

/*tsModel0*/
export type tsModel0 = {
    date: number;
    weekend: number;
    date_cn: string;
    weekend_cn: string;
}

const useWeekData = () => {
    const [data, setData] = useState<tsModel0[]>([]);

    useEffect(() => {
        fetch("https://api.apihubs.cn/holiday/get?field=weekend,date&cn=1&size=31").then(res => res.json()).then(res => {
            setData(res.data.list)
        })
        return () => {
            setData([])
        }
    }, [])

    return data;
}

export default useWeekData;

与 React 组件不同的是，自定义 Hook 不需要具有特殊的标识。我们可以自由的决定它的参数是什么，以及它应该返回什么（如果需要的话）。换句话说，它就像一个正常的函数。但是它的名字应该始终以 use 开头，这样可以一眼看出其符合 Hook 的规则。

像上面的那个hook，我们现在先不进行参数的传递，试着去组件3使用一下。

代码：

import useWeekData from "../hooks/useWeekData";

const Test3 = () => {

    const data = useWeekData();

    return (
        <div>
            {data.map(item => <p>{item.date_cn}{item.weekend_cn}</p>)}
        </div>
    )
}

export default Test3;

到这，就相当于完成了一个基本的hook了，相比起之前，我们的代码更加的简洁。

像官网上有到，每次调用hook，它都会使用独立的state，就跟组件一样，我们每一个hook都是独立的不互相影响。

今天学习课程加练习一共用了30分钟，主要是学习如何书写自己的hook