Hooks的理解

"hooks" 直译是 “钩子”。通常指

系统运行到某一时期时，会调用被注册到该时机的回调函数。

在react@16之后，引入了一系列以“use”作为开头的方法

Hook 让你可以在组件中使用不同的 React 功能。这是react的官方文档的定义

React官方内置hooks可以分类为

状态Hook
- useState 声明了一个你可以直接更新的 state 变量。
- useReducer 声明了一个带有更新逻辑的 state 变量在一个 reducer 函数中。
Context Hook
- useContext 读取并订阅一个 context。
Ref Hook
- useRef 声明一个 ref。你可以在其中保存任何值，但最常见的是它用来保存一个 DOM 节点。
- useImperativeHandle 可以让你自定义组件所暴露的 ref。一般很少使用。
Effect Hook
- useEffect 将一个组件连接到外部系统。
- useLayoutEffect 在浏览器重新绘制屏幕前执行。在这里，你可以测量布局。
- useInsertionEffect 在 React 对 DOM 进行更改之前触发。在这里，库可以插入动态的 CSS。
性能Hook
- useMemo 让你缓存一个代价非常高的计算结果。
- useCallback 让你在将一个函数定义传递给一个优化的组件之前缓存它。
- useTransition 让你把一个状态转换标记为非阻塞，并允许其他更新中断它。
- useDeferredValue 让你推迟更新用户界面的一个非关键部分，让其他部分更新。
其他Hook
- useDebugValue 允许你在 React 开发者工具中为自定义 Hook 添加一个标签。
- useId 允许组件绑定一个唯一 ID。通常与可访问性 API 一起使用。
- useSyncExternalStore 允许一个组件订阅一个外部 store。
自定义Hook

在React中，每个被命名为use+大写字母的函数就是一个hook，只能在函数组件中调用，只能在最顶层使用

在拥有Hooks之前，多用mixin来解决状态逻辑的复用

相比于mixins，hook的优点在于

在class组件中，this的绑定问题。代码量更少。

这里鸣谢

Hooks的理解​