React 自定义hook及一个hook库分享

什么是自定义hook

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

• React提供的hook：useState、useEffect.....
• 自定义hook：通过一个以“use”开头命名的函数，实现一些功能逻辑，内部可以调用其他hook。通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。

hooks的规则

• 只在最顶层使用hooks，不要在循环、条件或者嵌套中调用hook

• 只在react函数（react函数组件、自定义hook组件）中调用hook，不要在普通的javascript函数中调用

• 可以使用eslint-plugin-react-hooks来强制执行这两条规则

自定义hook的规则

• 本质是一个函数，以“use”开头

• 内部正常使用useState、useEffect或者其他hooks自定义返回结果，格式不限。

• 每次调用 Hook，它都会获取独立的 state

示例

useFullscreen

useMap

一个好用的hooks库：ahooks

特性

• 易学易用
• 支持 SSR
• 对输入输出函数做了特殊处理，避免闭包问题
• 包含大量提炼自业务的高级 Hooks
• 包含丰富的基础 Hooks
• 使用 TypeScript 构建，提供完整的类型定义文件

几个hooks

• useReactive
• useNetwork
• useDeepCompareEffect
• useDrop & useDrag
• useSize
• useMemoizedFn
• useWhyDidYouUpdate
• useTrackedEffect
• useRequest