Skip to content

xiaochengzi6/rx-hook

Repository files navigation

hook 设计规则

在处理传入的函数时通常会使用 useLatest 去包裹,以获得最新的函数。

function useLatest<T>(value: T){
  const ref = useRef<T>()
  ref.current = value

  return ref
} 

对于必要属性也可以这样使用来获取最新的值

hook返回的函数使用 useMemoizedFn 去包裹函数,这样就不用在deps中放入函数所依赖的属性,来避免闭包陷阱 并且返回的函数的地址不会随着更新改变 对于不需要依赖的函数可以使用 useCallback() 包裹

...
return [
  value,
  {
    get: useMemoizedFn(get),
    set: useMemoizedFn(set),
  }
]
...

参考: ahooks 函数处理规范

hook 就和函数一样,首先要确定其功能,进而考虑是否依赖外部状态也就是函数的参数,函数的参数数量尽量不要超过三个,对于 多参函数要抽离每个 hook 要考虑的东西都不一样就比如 useDebounceFn 来说它使用了lodash的 debounce 看一下 debounce 传入的参数 debounce(func, [wait=0], [options=]) 道理上都一样 那么 hook 就设计的和其相同就行,或者可以更简洁一点 useDebounceFn(fn, options)

对于有多参且可选的函数 一般都会有多个函数签名用于校验

hook 返回值通常被数组包裹 存在多个action将被放在对象中 [value, {get, set}]

About

ahook 的源码学习

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published