introduction
This article is an easy-to-understand ahooks source code series. The main goals of this series are as follows:
- Deepen your understanding of React hooks.
- Learn how to abstract custom hooks. Build your own React hooks tool library.
- To cultivate the habit of reading and learning source code, the tool library is a good choice for reading source code.
Common elements of list page
For some backend management systems, typical list pages include filtering form items, Table tables, and Pagination pagination.
For systems using Antd, ahooks are mainly encapsulated through the useAntdTable and usePagination hooks.
usePagination
usePagination is based on useRequest implementation and encapsulates common paging logic.
First, the request is processed through useRequest. The data structure returned by the service convention is{ total: number, list: Item[] }。
The first parameter of the defaultParams parameter of useRequest is{ current: number, pageSize: number }. And obtain the total number of pages based on the requested parameters and the returned total value.
There is also a refreshDeps change, which will reset the current to the first page "changeCurrent(1)” and re-sell the request. Generally, you can put the conditions that pagination depends here.
const usePagination = <TData extends Data, TParams extends Params>(
service: Service<TData, TParams>,
options: PaginationOptions<TData, TParams> = {},
) => {
const { defaultPageSize = 10, ...rest } = options;
// The data structure returned by service is { total: number, list: Item[] } const result = useRequest(service, {
// The first parameter of service is { current: number, pageSize: number } defaultParams: [{ current: 1, pageSize: defaultPageSize }],
// Changes to refreshDeps will reset the current to the first page and re-sell the request. Generally, you can put the conditions that the pagination depends on here refreshDepsAction: () => {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
changeCurrent(1);
},
...rest,
});
// Get the relevant request parameters const { current = 1, pageSize = defaultPageSize } = [0] || {};
// Get the request result, total represents the total number of data const total = ?.total || 0;
// Get the total number of pages const totalPage = useMemo(() => (total / pageSize), [pageSize, total]);
}
Focus on the onChange method:
- The entry parameters are the current number of pages and the maximum number of each page.
- Calculate the total number of pages based on total.
- Get all parameters and execute the request logic.
- When modifying the current page or the maximum number of each page, the onChange method is directly called.
// c, stands for current page// p, represents page sizeconst onChange = (c: number, p: number) => {
let toCurrent = c <= 0 ? 1 : c;
const toPageSize = p <= 0 ? 1 : p;
// Calculate the total number of pages based on total const tempTotalPage = (total / toPageSize);
// If this is the case, the total page is smaller than the current page, and the current page needs to be assigned to the total number of pages if (toCurrent > tempTotalPage) {
toCurrent = (1, tempTotalPage);
}
const [oldPaginationParams = {}, ...restParams] = || [];
// Re-execute the request (
// Pay attention to the changes in parameters, mainly because the current number of pages and the total number of each page changes. {
...oldPaginationParams,
current: toCurrent,
pageSize: toPageSize,
},
...restParams,
);
};
const changeCurrent = (c: number) => {
onChange(c, pageSize);
};
const changePageSize = (p: number) => {
onChange(current, p);
};
Finally, the request result and the pagination field are returned, including all paging information. There are also functions that operate paging.
return {
...result,
// The pagination field will be returned, including all paging information and functions that operate paging. pagination: {
current,
pageSize,
total,
totalPage,
onChange: useMemoizedFn(onChange),
changeCurrent: useMemoizedFn(changeCurrent),
changePageSize: useMemoizedFn(changePageSize),
},
} as PaginationResult<TData, TParams>;
Summary: The default usage of usePagination is the same as that of useRequest, but the logic related to pagination requests is encapsulated internally. The returned result returns one more pagination parameter, including all paging information and functions that operate paging.
The disadvantage is that there are some restrictions on API request parameters, such as the entry parameter structure must be{ current: number, pageSize: number }, the return result is{ total: number, list: Item[] }。
useAntdTable
useAntdTable is based on useRequest implementation, encapsulates the commonly used Ant Design Form and Ant Design Table linkage logic, and supports both antd v3 and v4.
First, usePagination is called to process the logic of pagination.
const useAntdTable = &lt;TData extends Data, TParams extends Params&gt;(
service: Service&lt;TData, TParams&gt;,
options: AntdTableOptions&lt;TData, TParams&gt; = {},
) =&gt; {
const {
// form instance form,
// Default form options defaultType = 'simple',
// Default parameters, the first item is paging data and the second item is form data. [pagination, formData] defaultParams,
manual = false,
// RefreshDeps changes, reset current to the first page and re-initiate the request. refreshDeps = [],
ready = true,
...rest
} = options;
// Process the logic of paging // Pagination is also a re-encapsulation of useRequest const result = usePagination&lt;TData, TParams&gt;(service, {
manual: true,
...rest,
});
// ...
}
Then process the logic of filtering Form forms on the list page, where Antd v3 and Antd v4 versions are supported.
// Determine whether it is the fourth version of Antdconst isAntdV4 = !!form?.getInternalHooks;
Get the current form value,or：
// Get the current from valueconst getActivetFieldValues = () => {
if (!form) {
return {};
}
// antd 4
if (isAntdV4) {
return (null, () => true);
}
// antd 3
const allFieldsValue = ();
const activeFieldsValue = {};
(allFieldsValue).forEach((key: string) => {
if ( ? (key) : true) {
activeFieldsValue[key] = allFieldsValue[key];
}
});
return activeFieldsValue;
};
Verify form logic:
// Verification logicconst validateFields = (): Promise<Record<string, any>> => {
if (!form) {
return ({});
}
const activeFieldsValue = getActivetFieldValues();
const fields = (activeFieldsValue);
// antd 4
// validateFields is called directly if (isAntdV4) {
return ( as Antd4ValidateFields)(fields);
}
// antd 3
return new Promise((resolve, reject) => {
(fields, (errors, values) => {
if (errors) {
reject(errors);
} else {
resolve(values);
}
});
});
};
Reset the form：
// Reset the formconst restoreForm = () => {
if (!form) {
return;
}
// antd v4
if (isAntdV4) {
return ();
}
// antd v3
const activeFieldsValue = {};
().forEach((key) => {
if ( ? (key) : true) {
activeFieldsValue[key] = [key];
}
});
(activeFieldsValue);
};
Modify form type, support'simple'and'advance'. The initialized form data can be filled in the full amount of form data with simple and advance, and developers can set the form data according to the currently activated type. When modifying the type, the form form data will be reset.
const changeType = () => {
// Get the current form value const activeFieldsValue = getActivetFieldValues();
// Modify form value = {
...,
...activeFieldsValue,
};
// Set form type setType((t) => (t === 'simple' ? 'advance' : 'simple'));
};
// Modify the type and reset the form form datauseUpdateEffect(() => {
if (!ready) {
return;
}
restoreForm();
}, [type]);
_submitMethod: After verifying the form form, search the form data based on the current form form data, paging and other filter conditions.
const _submit = (initPagination?: TParams[0]) => {
setTimeout(() => {
// Check first validateFields()
.then((values = {}) => {
// The logic of pagination const pagination = initPagination || {
pageSize: || 10,
...(params?.[0] || {}),
current: 1,
};
// If there is no form, the request will be made directly based on the page logic. if (!form) {
// @ts-ignore
run(pagination);
return;
}
// Get the Data parameters of all current forms // record all form data
= {
...,
...values,
};
// @ts-ignore
run(pagination, values, {
allFormData: ,
type,
});
})
.catch((err) => err);
});
};
In addition, when the table triggers the onChange method, a request will also be made:
// the onChange event of the Table componentconst onTableChange = (pagination: any, filters: any, sorter: any) => {
const [oldPaginationParams, ...restParams] = params || [];
run(
// @ts-ignore
{
...oldPaginationParams,
current: ,
pageSize: ,
filters,
sorter,
},
...restParams,
);
};
During initialization, the request logic will be executed based on whether there is currently cached data, and if there is, the request logic will be executed based on the cached data. Otherwise, bymanualandreadyDetermine whether the form needs to be reset and then executed.
// Initialization logic// init
useEffect(() => {
// if has cache, use cached params. ignore manual and ready.
// > 0, it means there is a cache if ( > 0) {
// Use cached data = cacheFormTableData?.allFormData || {};
// After resetting the form, execute the request restoreForm();
// @ts-ignore
run(...params);
return;
}
// Non-manual and ready, execute _submit if (!manual && ready) {
= defaultParams?.[1] || {};
restoreForm();
_submit(defaultParams?.[0]);
}
}, []);
Finally, the data returned by the request is transmitted back to the Table component through dataSource, pagination, and loading, realizing the display of the Table's data and status. And expose some operation methods on Form forms to developers.
return {
...result,
// The data required by the Table component can be directly transmitted to the Table component tableProps: {
dataSource: ?.list || ,
loading: ,
onChange: useMemoizedFn(onTableChange),
pagination: {
current: ,
pageSize: ,
total: ,
},
},
search: {
// Submit the form submit: useMemoizedFn(submit),
// Current form type, simple | advance type,
// Switch form type changeType: useMemoizedFn(changeType),
// Reset the current form reset: useMemoizedFn(reset),
},
} as AntdTableResult<TData, TParams>;The above is the detailed content of common hook encapsulation examples on list pages. For more information about hook encapsulation on list pages, please pay attention to my other related articles!