{"id":13561857,"url":"https://github.com/puxiao/react-hook-tutorial","last_synced_at":"2025-05-16T15:09:34.733Z","repository":{"id":37680042,"uuid":"257183169","full_name":"puxiao/react-hook-tutorial","owner":"puxiao","description":"React Hook 系列教程，学习和探索Hooks世界。","archived":false,"fork":false,"pushed_at":"2024-02-09T10:48:36.000Z","size":367,"stargazers_count":839,"open_issues_count":0,"forks_count":152,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-12T14:16:57.532Z","etag":null,"topics":["hook","react","react-hook-tutorial"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/puxiao.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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-20T05:44:23.000Z","updated_at":"2025-04-02T08:22:55.000Z","dependencies_parsed_at":"2024-01-14T03:34:15.720Z","dependency_job_id":"29e20d02-b15c-47ba-8825-a8db836b6f25","html_url":"https://github.com/puxiao/react-hook-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puxiao%2Freact-hook-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puxiao%2Freact-hook-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puxiao%2Freact-hook-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puxiao%2Freact-hook-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/puxiao","download_url":"https://codeload.github.com/puxiao/react-hook-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254553958,"owners_count":22090417,"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","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":["hook","react","react-hook-tutorial"],"created_at":"2024-08-01T13:01:02.000Z","updated_at":"2025-05-16T15:09:29.725Z","avatar_url":"https://github.com/puxiao.png","language":null,"readme":"# 前言\n\n\u003e 以下信息更新于 2020.11.10\n\u003e\n\u003e 最近学习了 JS 原型链、数据结构与算法，以及在思否编程课上，看了一些 卡颂(微信公众号：魔术师卡颂) 录制的《[自顶向下学 React 源码](https://ke.segmentfault.com/course/1650000023864436)》课程，对 React 又有了更深的认识。\n\u003e\n\u003e 此时再回顾我半年前写的这系列文章，有几点现需要补充说明一下：\n\u003e\n\u003e 1. 强烈建议你在学习 hook 之前，先学习了解一下：JS 原型链、数据与结构中的 “链” 和 “树”。  \n\u003e    补充强调一点：在 react 源码中，并不是使用 TypeScript，而是使用和 TS 非常类似的 flow 语法，flow 是 facebook 推出的一种 JS 静态类型检查器。我之前一直误会以为 React 源码是用 TS 写的。\n\u003e 2. 强烈推荐你先阅读我的另外一篇文章：[《自顶向下学习React源码》学习笔记#第一章：理念篇](https://github.com/puxiao/notes/blob/master/%E3%80%8A%E8%87%AA%E9%A1%B6%E5%90%91%E4%B8%8B%E5%AD%A6%E4%B9%A0React%E3%80%8B%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.md) ，不需要精读，只需要大体了解一下 React 设计理念，会更加容易让你去理解 React 的渲染逻辑，利于理解 hook 。\n\u003e 3. 本系列文章中，每一个 hook 中所列出来的该 hook 源码虽然出自 React 官方源码，但实际并不是真的 hook 源码，而仅仅是对 hook 实现的简单引用。\n\u003e\n\u003e 以上信息更新于 2020.11.10\n\n\n\n\n## 我是谁？\n\n你好，欢迎你来阅读我写的关于React Hook相关的文章。\n\n我是2020年4月才开始接触学习React的，起初摆在我面前的问题是该学习Vue还是React？  \n\n网上关于Vue和React，有以下2条论断：  \n1、Vue相当于扩展了html、而React相当于扩展了js。  \n2、如果你希望快速构建应用，那么应选择Vue、如果你希望构建复杂的应用，那么应选择React。\n\n在做了一些了解后，我决定选择学习React。不是Vue不好，而是据我了解，国内一线大厂使用React的更多一些。  \n\n\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/puxiao/notes/master/imgs/wechat.jpg\" alt=\"wechat.jpg\"/\u003e\n\u003c/p\u003e\n\n\n## 学习 React Hook 过程\n\n当我决定开始学习React时，我先下载了一些React视频教程，对React、类组件开发有了基础的掌握，这个时候我接触到了 React Hook，当我稍微深入了解之后，发现 React Hook 函数组件开发才是 React 的最新主流趋势。  \n\n\u003e 备注：React Hook 是 React 2019年2月在16.8版本中才正式发布的。  \n\n当我满怀激动准备学习 React Hook 时才发现相关教程非常少。\n\n最具权威的React官方文档 翻译腔 比较重，对于 Hook 的讲解看了2遍之后依然懵懵懂懂，不明所以。 思否、掘金、雀语上面相关的文章不仅少，而且也不系统全面。 \n\n此时我通过科学上网，在YouTube上找到了 Codevolution 专栏下的一套 “React Hooks Tutorial” 课程，开始了 React Hook 系统学习。  \n\n其中useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef、自定义Hook这些知识都来自这门课程。  \n\n后期学习的useImperativeHandle、useLayoutEffect、useDebugValue这些知识来自于 Bitovi 专栏下的 “React Hooks — The Weird Ones” 视频课程。\n\n## 为什么要写？\n\n在学习每一个Hook过程中，通常我是这样进行的：  \n1、看一遍视频教程  \n2、看一遍React官网文档  \n3、敲一遍示例代码  \n4、遇到理解不了的，去各大技术站点搜索一下  \n5、最后再以教给别人的口吻，写下对应Hook的教程文章  \n\n通过这种方式，我对 React Hook 有了系统的学习，我把我写的教程文章分享出去，如果你正在准备学习 React Hook，希望能够帮助到你。\n\n## 文章目录\n\n[00 前言](https://github.com/puxiao/react-hook-tutorial/blob/master/00%20%E5%89%8D%E8%A8%80.md)  \n[01 React Hook 简介](https://github.com/puxiao/react-hook-tutorial/blob/master/01%20React%20Hook%20%E7%AE%80%E4%BB%8B.md)  \n[02 useState基础用法](https://github.com/puxiao/react-hook-tutorial/blob/master/02%20useState%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95.md)  \n[03 useState高级用法](https://github.com/puxiao/react-hook-tutorial/blob/master/03%20useState%E9%AB%98%E7%BA%A7%E7%94%A8%E6%B3%95.md)  \n[04 useEffect基础用法](https://github.com/puxiao/react-hook-tutorial/blob/master/04%20useEffect%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95.md)  \n[05 useEffect高级用法](https://github.com/puxiao/react-hook-tutorial/blob/master/05%20useEffect%E9%AB%98%E7%BA%A7%E7%94%A8%E6%B3%95.md)  \n[06 useContext基础用法](https://github.com/puxiao/react-hook-tutorial/blob/master/06%20useContext%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95.md)  \n[07 useContext高级用法](https://github.com/puxiao/react-hook-tutorial/blob/master/07%20useContext%E9%AB%98%E7%BA%A7%E7%94%A8%E6%B3%95.md)  \n[08 useReducer基础用法](https://github.com/puxiao/react-hook-tutorial/blob/master/08%20useReducer%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95.md)  \n[09 useReducer高级用法](https://github.com/puxiao/react-hook-tutorial/blob/master/09%20useReducer%E9%AB%98%E7%BA%A7%E7%94%A8%E6%B3%95.md)  \n[10 useCallback基础用法](https://github.com/puxiao/react-hook-tutorial/blob/master/10%20useCallback%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95.md)  \n[11 useMemo基础用法](https://github.com/puxiao/react-hook-tutorial/blob/master/11%20useMemo%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95.md)  \n[12 useRef基础用法](https://github.com/puxiao/react-hook-tutorial/blob/master/12%20useRef%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95.md)  \n[13 useImperativeHandle基础用法](https://github.com/puxiao/react-hook-tutorial/blob/master/13%20useImperativeHandle%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95.md)  \n[14 useLayoutEffect基础用法](https://github.com/puxiao/react-hook-tutorial/blob/master/14%20useLayoutEffect%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95.md)  \n[15 useDebugValue基础用法](https://github.com/puxiao/react-hook-tutorial/blob/master/15%20useDebugValue%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95.md)  \n[16 自定义hook](https://github.com/puxiao/react-hook-tutorial/blob/master/16%20%E8%87%AA%E5%AE%9A%E4%B9%89hook.md)  \n[17 React Hook 总结](https://github.com/puxiao/react-hook-tutorial/blob/master/17%20React%20Hook%20%E6%80%BB%E7%BB%93.md)  \n[18 示例：React使用Echarts所用到的hooks](https://github.com/puxiao/react-hook-tutorial/blob/master/18%20%E7%A4%BA%E4%BE%8B%EF%BC%9AReact%E4%BD%BF%E7%94%A8Echarts%E6%89%80%E7%94%A8%E5%88%B0%E7%9A%84hooks.md)  \n[19 useTransition基础用法](https://github.com/puxiao/react-hook-tutorial/blob/master/19%20useTransition%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95.md)  \n[附01：React基础知识](https://github.com/puxiao/react-hook-tutorial/blob/master/%E9%99%8401%EF%BC%9AReact%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86.md)  \n[附02：React扩展阅读](https://github.com/puxiao/react-hook-tutorial/blob/master/%E9%99%8402%EF%BC%9AReact%E6%89%A9%E5%B1%95%E9%98%85%E8%AF%BB.md)  \n\n## 重要说明\n\n本系列 React Hook 教程里的观点、思维、解释、代码 均出自我个人学习 Hook 之后的感悟和总结，难免有不准确的地方。  \n\n甚至个别的地方掺杂了我个人的一些习惯用语和思维模式，对于 hook 的有些概念解释，我使用了自己的语言习惯，这会和React官网文档的解释略有不同，但是这些不同地方我认为是没有问题的。  \n\n恰恰是这些不同之处，有助你更加多角度理解 React Hook。  \n\n我写的这些教程只能作为你学习React Hook 众多参考资料中的其中一种。    \n\n\n\n\u003cbr\u003e\n\n\u003e 以下内容更新于 2022.12.08\n\n**特别感谢：**\n\n* 帮我指出一些错误、提交 PR 的朋友们\n* 第 19 小节是由 @[Bill70058](https://github.com/Bill70058) 独立编写的\n\n\n\n\u003cbr\u003e\n\n\n## 信息反馈\n\n若有错误欢迎指正，本人微信同QQ (78657141)，或通过邮件联系：yangpuxiao@gmail.com\n\n\n本系列文章在Github中的地址为：[https://github.com/puxiao/react-hook-tutorial](https://github.com/puxiao/react-hook-tutorial)\n","funding_links":[],"categories":["miscellaneous","Others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpuxiao%2Freact-hook-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpuxiao%2Freact-hook-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpuxiao%2Freact-hook-tutorial/lists"}