React-Hook页面组成

一、import部分

1. eslint-plugin-import排序，避免冲突
2. 静态常量、类型 分别引进 -- 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,
  },
);