吖蛋
V1
2023/01/06阅读:30主题:默认主题
Rect-Hook规范
React-Hook页面组成
一、import部分
-
eslint-plugin-import排序,避免冲突 -
静态常量、类型 分别引进 -- constants文件夹 、types文件夹
project
│ │
└───src
└───constants // 常量集合
│ index.ts
│ common.ts
│ home.ts
│ ...
constants/index.ts
export * from './common';
export * from './home';
export * from './xxx';
二、Page-Container内容
const location = useLocation();
const region = useRegion();
const [isSelectAll, setIsSelectAll] = useState(false);
const [total, setTotal] = useState(0);
const getData = useCallback(() => {
xxxx
}, []) // 依赖项用eslint-Hook修复
const doSomething = useCallback(() => {
xxxx
}, [])
// 副作用处理
useEffect(() => {
getData();
doSomething();
}, [])
return (
<div></div>
)
三、常用hook
1、useEffect VS useLayoutEffect


影响到布局dom的优先使用useLayoutEffect,其余使用useEffect
2、useCallback VS useMemo
-
函数使用useCallback (当超过2次调用时,应当使用 -- 昂贵或缓慢的 API 调用),因如果存在setState,一般会超过2次,所以建议函数统一使用useCallback,降低心智负担 -
开销计算大使用useMemo 如:复杂计算值、dom内容
3、useRef
-
获取dom节点,如需获取某个dom的高度 - xxxRef.current.clientHeight -
获取某个自定义组件 & 调用该组件的方法 - xxxRef.current.get()
四、引入ahooks
1、useMount
-
只触发一次,如详情页获取初始化数据
useMount(() => {
})
// 等价关系
useEffect(() => {
}, [])
2、useUnMount
-
在组件卸载时,执行的函数
3、useSetState
-
管理object类型的hook,一般使用在form表单数据或详情页获取数据等...
interface State {
hello: string;
count: number;
[key: string]: any;
}
const [state, setState] = useSetState<State>({
hello: '',
count: 0,
});
// 使用
setState({ hello: 'world' })
setState({ count: state.count + 1 })
4、useMemoizedFn
-
在某些场景中,我们需要使用 useCallback 来记住一个函数,但是在第二个参数 deps 变化时,会重新生成函数,导致函数地址变化。使用 useMemoizedFn,可以省略第二个参数 deps,同时保证函数地址永远不会变化。 -
应用场景:需持久化的函数,应用在公共组件中或性能开销大的函数
const [state, setState] = useState('');
// 在 state 变化时,func 地址会变化
const func = useCallback(() => {
console.log(state);
}, [state]);
// func 地址永远不会变化
const func = useMemoizedFn(() => {
console.log(state);
});
5、useDebounceFn
用来处理防抖函数的 Hook
const [value, setValue] = useState(0);
const { run } = useDebounceFn(
() => {
setValue(value + 1);
},
{
wait: 500,
},
);
作者介绍
吖蛋
V1