@kartjim/chook NPM

chook

reack hook library

npm i @kartjim/chook

yarn add @kartjim/chook

📃 Documentation

✍️ state
- useSetState 管理 object 类型 state 的 Hooks
- useBoolean 更好管理 Boolean 的 Hook
- usePrevious 保存上一次渲染时 state 的值。
- useSafeState 用法与 React.useState 完全一样，避免因组件卸载后更新状态而导致的内存泄漏。
- useDebounce 用于防抖的 Hook 函数
- useThrottle 用于节流的 Hook 函数
- useSet 用于操作 Set 数据类型的 Hook
- useMap 用于操作 Map 数据类型的 Hook
- useClippy 用于读取和写入用户的剪贴板的 Hook
- useFirstMountState 判断组件是否是首次渲染的 Hook
- useLatest 对 useRef 进行封装，保证每次拿到最新的值，避免你闭包问题。
🔔 effect
- useUpdate 实现组件的强制更新。
- useTimeout 在函数组件里可使用 setTimeout 一样使用 useTimeout 。
- useInterval 在函数组件里可使用 setInterval 一样使用 useInterval 。
- useUpdateEffect 更新后立即调用，但是首次渲染不会执行此方法。
🔯 lifecycle
- useMount 实现类似于 class 组件中的 componentDidMount 生命周期钩子
- useUnmount 实现类似于 class 组件中的 componentWillUnmount 生命周期钩子。
- useUnmountedRef 获取当前组件是否已经卸载的 Hook。
🪢 dom
- useTitle 自定义页面title
- useFavicon 设置页面 favicon 的 Hook
- useActive 监控点击事件
- useClickOutside 监听目标元素外的点击事件
- useFocus 监控是否拥有焦点
- useHover 监控鼠标是否移入
- useMousePosition 获取鼠标的 offsetX 和 offsetY 值
🦴 optimize
- useClosure 替代 useCallback ，避免闭包陷阱。