brick-hooks

可用于 React/React-native 的 React Hooks Library. 部分仅可用于 web/react-native 的 hook 见 brick-hooks-web、brick-hooks-native

在线文档

用法

import { useArray } from 'brick-hooks';

全局状态管理

useStore 更好用的全局状态管理。导出hydrogen-store的 useStore

处理请求

useAsync 对请求进行简单处理，自动处理 loading

简化数据处理

useArray 方便使用数组

useCounter 步进器数字处理

useToggle 方便切换布尔值

useSet 方便使用 set

useListData 将列表类型数据方便的自动进行对象、tree、分组等转化

useListState 创建/维护列表类型数据，方便的自动进行对象、tree、分组等转化

useDataListToTree useListData 中转化为 tree 的封装，将列表类型数据转化为树的格式

useDataListToMap useListData 中转化为 Object 的封装

useDataTreeToList 将树的格式的数据转化为列表

useDeepCompare 对数据进行深比较，返回比较结果和深克隆的新值

useTrim 对字符串进行自动去除空格

useTrimValue 创建一个字符串 state，并对字符串进行自动去除空格

useMemoCompare 根据指定函数判断一个数据是否应该触发更新，返回新的值

开发方式

useMethods 使用 useMethods 替代 useState、useReducer，可以使你早下班一个小时

useMethodsImmer 使用 useMethodsImmer 替代 useState、useReducer，向 vuex 一样管理 reducer! 可以使你早下班一个小时

useObjectState useMethods 的更进一步封装，对于 obj 类型的 state 集合使用，类似于 class 组件的 state，同样提供了方便使用的 reducer 等能力

useObjectStateImmer useObjectState 的 immer 版本

useReducerImmer 官方 useReducer 的 Immer 版本，通常情况下使用 useMthods、useObjectState 更佳

useEventBus 提供一个 Pub/Sub 模式的 hook，快速跨组件进行事件发布订阅

useForceRender 返回一个强制更新的函数，调用时强制触发组件更新

生命周期

useDidMount 提供一个类似于 componentDidMount 生命周期的 hook

useDidUpdate 提供一个类似于 componentDidUpdate 生命周期的 hook，首次不执行，仅更新时执行方法

useWillUnmount 提供一个类似于 componentWillUnmount 生命周期的 hook

useUnmountedRef 返回一个 ref，ref 的值为当前是否已卸载

debug

useLogRender 打印触发当前组件渲染的 state

useRenderCount 打印当前组件渲染的次数

常见简单业务

useListChecked 列表的单选、多选、选中全部

useListViewData 列表页的请求、请求下一页等能力

useInput 对 input 进行自动管理数据

useCountdown 倒计时、天时分秒毫秒

useCountup 计时、天时分秒毫秒

useListSequenceLoad 信息列表分组懒加载，可用于首页等每个组件都自己维护状态/请求等的组件

useHistoryRef 创建、管理历史记录，并可进行回退、重做功能。返回 ref

useHistoryState 创建、管理历史记录，并可进行回退、重做功能。

其他

useIsoEffect 当当前环境为浏览器的时候，使用 useLayoutEffect 替代 useEffect。用于一些动画等需要即时更新

useEffectWithPrev 同 useEffect，不同的是，回调函数提供一个参数，为上一次的 deps

useMemoWithPrev 同 useMemo，不同的是，回调函数提供两个参数，为上一次的 deps 及上次的 value

usePrevious 获取上一次的值，默认为最近一次更新前的值。也可以配置为每次 rerender 时触发

useInterval 方便使用 setInterval

useTimeout 方便使用 setTimeout

useTimeoutFn 方便使用 setTimeout,返回一个安全包裹的 setTimeout 函数

useDebounceEffect 提供一个防抖的 Effect

useEffectMaunal 同 useEffect，不同的是，不通过 deps 进行触发, 而通过返回一个更新函数触发 effect callback

useDebounceFn 对函数进行自动防抖处理

useDebounceState 使用防抖更新的 useState

useDebounceValue 对变化进行防抖处理的 value

useThrottleFn 对函数进行自动节流处理

useRefCallback 对函数使用 React.useRef 存储，保证任何依赖更新函数引用都不会改变

useRefValue 使用 ref 存储的 value