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

你可能感兴趣的:(react.js,前端,前端框架)