吖蛋

V1

2023/01/06阅读:30主题:默认主题

Rect-Hook规范

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'',
  count0,
});

// 使用
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);
  },
  {
    wait500,
  },
);

分类:

前端

标签:

React.js

作者介绍

吖蛋
V1