屠龍之技的专栏

终于到了这个系列最后一篇hook教程，其实还有几个hook没有介绍，有的是几乎用不到的，还有的是React18版本新出的（不要再更新啦，老夫真的学不动啦）说回正题，众所周知，React是单向数据流，是由父组件传参给子组件，所以一般只能子组件调用父组件方法，但是实际业务复杂多变，有些场景就是需要父组件调用子组件，所以React也提供了这一方式，但是官方也说了，应当避免这种命令式的代码，破坏了React父不知子的原则。......

useReducer 是 React 官方参考 Redux 第三方库的思想设计的 Hook，可以看做 useState 的高级版，用事件分发机制处理复杂的状态变化

React Hooks 教程系列React Hooks 教程之 useStateReact Hooks 教程之 useEffectReact Hooks 教程之 useRefReact Hooks 教程之 useMemo&useCallbackReact Hooks 教程之 useContextuseContextuseContext 用于保存全局上下文信息，我们可以在其中放入公共的对象，供所有子组件使用，比如字典、鉴权信息细心的读者可能会发现，我的教程没有按照 React 官方

HeaderReact Hooks 教程系列：React Hooks 教程之 useStateReact Hooks 教程之 useEffectReact Hooks 教程之 useRefReact Hooks 教程之 useMemoMiddleuseMemo 用于做性能优化，Memo 是 memoized（记忆）的简写useMemo 返回的是一个缓存的值，可以避免其在组件更新时就被重新计算，而是在它的依赖项改变时才重新计算下面来看示例，将 App.tsx 文件内容替换为下面的代码：

前言上一篇介绍了 useEffect，这一篇介绍 useRef不搭useRef 返回一个可变的 ref 对象，ref 对象在组件的整个生命周期一直存在，其 current 属性为保存的值官方的解释有点晦涩，其实 useRef 就两种用法：1、 保存 JSX 中 DOM 元素的引用，用于操作 UI 元素2、 保存变量，这一点同 useState，区别在于，useRef 保存的变量值改变时，并不会通知你保存 DOM 元素将 App.tsx 文件内容替换为下面的代码：import React f

前前前上一篇介绍了 useState，这一篇讲讲 useEffect中中中功能介绍useEffect 用于在函数组件中执行副作用操作，那什么是副作用呢？数据获取，数据订阅，以及手动更改 React 组件中的 DOM 都属于副作用因为我们渲染出的页面都是静态的，任何在其之后的操作都会对其产生影响，所以称之为副作用，副作用又分为两种：无需清除的副作用比如发送网络请求，手动变更 DOM，记录日志，这些都是常见的无需清除的操作，因为在执行完这些操作之后就不用管了需要清除的副作用比如订阅外部数据源

初衷发现网上很少有用 TypeScript 写的 React 教程，基本都是 JavaScript 写的，而且只是教你要这么写，没有解释为什么要这么写，官方文档也一样对于从其他端（移动端、后端）转到前端的开发者，一开始可能不太理解 React 的编程思想，因为自己就是这么过来的于是写了这篇面向非前端开发者的 React Hooks 教程，希望对小白有所帮助，带佬绕道创建项目这里使用 Vite 创建 React + TypeScript 的项目，当然你也可以用 React 官方的 create-re