【学习打卡】第5天 React Hooks学习2

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

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

主讲老师：CrazyCodeBoy

课程内容：今天学习的主要内容包括：react hooks方法学习。结合官网，对hooks进行深入的了解

课程收获：

熟悉React的其他hooks

1. Effect Hook

我们有一个常见的需求，就是在页面渲染完成后，调用接口获取数据，在之前，我们使用React的生命周期来进行这个操作。在hook中可以使用到useEffect，它就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。

简单的示例：

import { useEffect, useState } from "react"

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

const Test2 = () => {

    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 (
        <div>
            {data.map(item => <p>{item.date_cn}{item.weekend_cn}</p>)}
        </div>
    )
}

export default Test2;

在这个代码中，当页面加载完成了，就会调用api接口，查询出本月每天是星期几的数据，然后存到data里面，并在页面渲染出来。

其实可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

同样的，在React里面，有两个常见的副作用操作，1，需要清除的，2，不需要清除的。他们的区别如下。

无需清除的effect

就比如说刚才的网络请求，修改文字信息，这些都是在React更新DOM之后运行的额外的代码，这些都可以不用清除掉的，因为它们没有副作用，可以忽略掉。

需要清除的 effect

什么去需要请求的呢，比如说，事件的监听，定时器等，主要是为了防止内存泄漏。

写法也很简单，我们只要在effect中返回一个函数。这个就是effect的清除机智，每个effect都可以返回一个清除函数。

示例代码：

    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([])
        }
    }, [])

React 会在组件卸载的时候执行清除操作。

今天学习课程加练习一共用了30分钟，主要是学习effect的用法，学习了hook如何调用接口拿到数据，如何在组件销毁的时候，执行代码，明天开始学习如何自定义hooks方法