{"id":19978027,"url":"https://github.com/tuture-dev/covid-19-with-hooks","last_synced_at":"2026-03-15T21:04:38.817Z","repository":{"id":101984754,"uuid":"255347501","full_name":"tuture-dev/covid-19-with-hooks","owner":"tuture-dev","description":"《用动画和实战打开 React Hooks》系列源码","archived":false,"fork":false,"pushed_at":"2020-08-08T14:11:35.000Z","size":468,"stargazers_count":25,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-04T03:34:43.611Z","etag":null,"topics":["animation","react","react-hooks","useeffect","usestate"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tuture-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-13T14:15:57.000Z","updated_at":"2024-02-04T04:37:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"6f8fd4b6-6f8a-46eb-a292-ad124296670f","html_url":"https://github.com/tuture-dev/covid-19-with-hooks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tuture-dev/covid-19-with-hooks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuture-dev%2Fcovid-19-with-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuture-dev%2Fcovid-19-with-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuture-dev%2Fcovid-19-with-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuture-dev%2Fcovid-19-with-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tuture-dev","download_url":"https://codeload.github.com/tuture-dev/covid-19-with-hooks/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuture-dev%2Fcovid-19-with-hooks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274848001,"owners_count":25360979,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-12T02:00:09.324Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","react","react-hooks","useeffect","usestate"],"created_at":"2024-11-13T03:30:12.878Z","updated_at":"2026-03-15T21:04:38.773Z","avatar_url":"https://github.com/tuture-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 用动画和实战打开 React Hooks\n\n![](https://imgkr.cn-bj.ufileos.com/b5ec179c-fcf4-431f-a363-80ba2905f142.png)\n\n## 运行项目\n\n本项目用 [CRA](https://create-react-app.dev/) 搭建，因此启动项目非常简单：\n\n```bash\nnpm install \u0026\u0026 npm start\n```\n\n## 为什么要写这一系列 Hooks 教程？\n\n如何快速学习并掌握 React Hooks 一直是困扰很多新手或者老玩家的一个问题，而笔者在日常的学习和开发中也发现了以下头疼之处：\n\n- React 官方文档对 Hooks 的讲解偏应用，对原理的阐述一笔带过\n- 讲 React Hooks 的优秀文章很多，但大多专注于讲解一两个 Hook，要想一网打尽有难度\n- 看了很多使用方法甚至源码分析，但是没法和具体的使用场景对应起来，不了解怎么在实际开发中灵活运用\n\n如果你也有同样的困惑，希望这一系列文章能帮助你拨开云雾，让 Hooks 成为你的称手兵器。我们将通过一个完整的 COVID-19 数据可视化项目，结合 Hooks 的动画原理讲解，让你真正地精通 React Hooks！\n\n说实话，Hooks 的知识点相当分散，就像游乐园的游玩项目一样，选择一条完美的路线很难。但是不管怎么样，希望在接下来的旅程中，你能玩得开心😊！\n\n## useState 与 useEffect\n\n原文链接：https://tuture.co/2020/04/08/870a7b7/\n\n理解函数式组件的运行过程：\n\n![](https://imgkr.cn-bj.ufileos.com/9a55a40e-ebd5-4ffb-9b8b-3cdd4e9161a3.gif)\n\n`useState` 使用浅析：\n\n![](https://imgkr.cn-bj.ufileos.com/e09f2b4d-e20d-4bad-ba62-80d860f80e9f.gif)\n\n`useEffect` 使用浅析（每次重渲染都执行）：\n\n![](https://imgkr.cn-bj.ufileos.com/ad9b947f-77fe-43a0-bdee-a27d11246204.gif)\n\n`useEffect` 使用浅析（只在初次渲染后执行）：\n\n![](https://imgkr.cn-bj.ufileos.com/bd507a8c-bf75-4e06-be79-7c027cce6955.gif)\n\n`useState` 的本质（初次渲染）：\n\n![](https://imgkr.cn-bj.ufileos.com/af2ed210-08f7-4741-b17c-c2d4b67db3ff.gif)\n\n`useState` 的本质（重渲染）：\n\n![](https://imgkr.cn-bj.ufileos.com/799216d1-b91e-4cb6-9410-b8776ab82ff5.gif)\n\n`useEffect` 的本质：\n\n![](https://imgkr.cn-bj.ufileos.com/ebb090f8-7471-46ad-9556-b773d1910d03.gif)\n\n## 自定义 Hook 与 useCallback\n\n写作中。\n\n## useReducer 和 useContext\n\n写作中。\n\n## 敬请期待\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuture-dev%2Fcovid-19-with-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftuture-dev%2Fcovid-19-with-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuture-dev%2Fcovid-19-with-hooks/lists"}