hooks库

react hooks

1. react-use
   1. https://github.com/zenghongtu/react-use-chinese/blob/master/README.md
2. swr 获取远程数据
3. hooks
   1. https://ahooks.js.org/zh-CN/
   2. https://github.com/alibaba/hooks
4. awesome-react-hooks https://github.com/rehooks/awesome-react-hooks
5. beautiful-react-hooks https://github.com/antonioru/beautiful-react-hooks/blob/master/docs/README.zh-CN.md

https://github.com/search?o=desc&p=2&q=react+hooks&s=stars&type=Repositories
https://github.com/BetaSu/big-react

react-spring 动画库
@use-gesture 是一个触摸事件和鼠标库，可让您将更丰富的鼠标和触摸事件绑定到任何组件或视图
https://github.com/swagger-api/swagger-ui
https://chakra-ui.com/docs/components
https://github.com/chakra-ui/chakra-ui
基于css-in-js的前端框架
tailwind CSS 的api
https://zhuanlan.zhihu.com/p/136481595
https://www.docz.site/
https://github.com/doczjs/docz
https://github.com/formatjs/formatjs

form
https://github.com/jaredpalmer/formik
https://github.com/react-hook-form/react-hook-form
类似 antd的 react组件库
https://mantine.dev/
blog平台
https://docs.zhyd.me/
https://github.com/zhangyd-c/OneBlog
云开发
https://workbench.aliyun.com/
https://www.apollo.io/product/api/

ahooks

https://github.com/alibaba/hooks

usehooks

https://github.com/uidotdev/usehooks

react-use

https://github.com/streamich/react-use

React Helmet

https://github.com/nfl/react-helmet
HTML文档head管理工具，管理对文档头的所有更改。
Helmet采用纯 HTML 标签并输出纯 HTML 标签

自定义 hooks

1. Hooks都是函数
2. Hooks命名以 use开头
3. Hooks内部可以调用其他 Hook函数
4. Hooks不是 react的特性

自定义 hooks提高开发效率
think-react-store

useTitleHook

根据url修改页面title
/useTitleHook.js

import {useLayoutEffect, useState} from 'react'
function useTitleHook(title) {
  const [state, setState] = useState('')
  useEffect(() => {
    document.title = title
    setState(title)
  }, [title])
  return state
}
export default useTitleHook

/index.js

export { default as useTitleHook } from './useTitleHook'

组件使用

import { useTitleHook } from '@/hooks'
export default function(props) {
  const title = useTitleHooks('list')
}