8lab_hooks 中文文档教程

Question

hooks

useColumns

适用于 columns 中有 render 依赖外部 State, 或 columns 有关联 columnsSetter 做动态变更

快速开始：

  import { TableColumnSetter } from '@ncompass/table-column-setter'
  import { useFetchData, useColumns } from '@ncompass/hooks'

  const { columns, columnsSetter } = useColumns({
    dependencies: [data],
    columns: [
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        render: (text) => {
          return data?.res
        },
      },
      {
        key: 'aaabbb',
        title: 'aaabbb',
        dataIndex: 'aaabbb',
        defaultHide: true,
      },
    ],
  })

  <TableColumnSetter
    columns={columns}
    onChange={columnsSetter}
  />

  <Table
    pagination={pagination}
    dataSource={data || []}
    onChange={changeHandler}
    columns={columns}
    loading={loading}
  />

useWindowSize

用于监听 window 宽高 (clientWidth,clientHeight)

const size: { width: number, height: number} = useWindowSize()

useLocalStorage

用于跨页签共享信息 目前包含用户信息设置

用户信息设置: 用户在多页签进行操作 所有页签共享最新 activeTime 以保证设置的超时时间过后准时 logout

快速开始

const { isUserActive, login, getUserToken, getUserInfo } = useLocalStorage({
  userActivePeriod: 3600,
});

useEffect(() => {
  setTimeout(() => login({ token: 'askjhkjashdsad', name: 'pd' }), 2000);
}, []);

useEffect(() => {
  console.log(isUserActive, getUserToken(), getUserInfo());
}, [isUserActive]);

useFetchData

用于接口请求

用于接口发送请求，携带参数，支持 post,get,delete,put 请求方式，自带刷新列表,自带 loading 等功能

快速开始

const { data, setParams, loading, reload } = useFetchData({
    doWhileInit = true, //是否立即触发
    url = '', // 请求地址
    method = requestMethodTypes.post, // 请求方式
    dataProcess,// 获取数据成功后 可选的结果处理函数  (data: any) => any  返回值会被设置为新的data
    errorHandler,// 获取数据失败后  可选的错误处理函数  (error: object) => void
    successHandler,// 获取数据成功后 可选的回调函数 ,处理异步
    params, // 参数对象
});