tuture-dev / covid-19-with-hooks

《用动画和实战打开 React Hooks》系列源码

用动画和实战打开 React Hooks

运行项目

本项目用 CRA 搭建，因此启动项目非常简单：

npm install && npm start

为什么要写这一系列 Hooks 教程？

如何快速学习并掌握 React Hooks 一直是困扰很多新手或者老玩家的一个问题，而笔者在日常的学习和开发中也发现了以下头疼之处：

• React 官方文档对 Hooks 的讲解偏应用，对原理的阐述一笔带过
• 讲 React Hooks 的优秀文章很多，但大多专注于讲解一两个 Hook，要想一网打尽有难度
• 看了很多使用方法甚至源码分析，但是没法和具体的使用场景对应起来，不了解怎么在实际开发中灵活运用

如果你也有同样的困惑，希望这一系列文章能帮助你拨开云雾，让 Hooks 成为你的称手兵器。我们将通过一个完整的 COVID-19 数据可视化项目，结合 Hooks 的动画原理讲解，让你真正地精通 React Hooks！

说实话，Hooks 的知识点相当分散，就像游乐园的游玩项目一样，选择一条完美的路线很难。但是不管怎么样，希望在接下来的旅程中，你能玩得开心😊！

useState 与 useEffect

原文链接：https://tuture.co/2020/04/08/870a7b7/

理解函数式组件的运行过程：

useState 使用浅析：

useEffect 使用浅析（每次重渲染都执行）：

useEffect 使用浅析（只在初次渲染后执行）：

useState 的本质（初次渲染）：

useState 的本质（重渲染）：

useEffect 的本质：

自定义 Hook 与 useCallback

写作中。

useReducer 和 useContext

写作中。

敬请期待

covid-19-with-hooks's Issues

hooks（一）问题

第一篇的实战，CountriesChart组件在第一次渲染的时候获取到的data值是[].

代码运行起来后，控制台飘红（已解决）

我对代码的修改也没什么头绪，目前怀疑是函数useCoronaAPI每次调用的结果都又触发了该函数的调用，导致了反复请求的发生。但不懂具体该如何修改

export function useCoronaAPI(
  path,
  { initialData = null, converter = (data) => data, refetchInterval = null }
) {
  const [data, setData] = useState(initialData);
  const convertData = useCallback(converter, [converter]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`${BASE_URL}${path}`);
      const data = await response.json();
      setData(convertData(data));
    };
    fetchData();

    if (refetchInterval) {
      const intervalId = setInterval(fetchData, refetchInterval);
      return () => clearInterval(intervalId);
    }
  }, [convertData, path, refetchInterval]);