tuture-dev / covid-19-with-hooks

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

用动画和实战打开 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

写作中。

敬请期待

About

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


Languages

Language:JavaScript 84.9%Language:HTML 10.6%Language:CSS 4.5%