Write React using class hooks. Now write React using hooks. Write code in the same way as in the previous life cycle.

const [tableData, setTableData] = useState<AbnormalOrderAppealList[]>([]); const [pageInfo, setPagination] = useState<PageInfo>({ pageNum: 1, pageSize: 20, totalCount: 0, }); const [formValue, setFormValue] = useState<{ createTime: any; excludeScene: string; }>({ createTime, excludeScene: '', }); const [visible, setVisible] = useState(false); const [checkTableData, setCheckTableData] = useState<LogsType[] | undefined>([]); const searchParams = (params: { createTime: any; excludeScene: string }) => ({ startTime: moment(params.createTime[0]).startOf('day').valueOf(), endTime: moment(params.createTime[1]).endOf('day').valueOf(), excludeScene: params.excludeScene, }); Const getList = useCallback(async (params: GetAppealRequest) => {const res = await getAppeal(params); setLoading(false); if (res? .code === 0) {// setTableData setTableData(res? .data? .abnormalOrderAppealList || []); SetPagination ({pageNum: res? .data? .pageNum, pageSize: res? .data? .pageSize, totalCount: res? .data? .totalCount, }); }} []); UseEffect (() => {getList({... searchParams(formValue), pageNum: 1, pageSize: 20, }); } []); // pageNum Change pagination query const handlePageChange = useCallback((page: number) => {setLoading(true); setPagination({ ... pageInfo, pageNum: page, }); GetList ({... searchParams(formValue), pageNum: page, pageSize: pageInfo.pageSize, }); }, [pageInfo], ); // pageSize change const handlePagesizeChange = useCallback((size: number) => {setLoading(true); setPagination({ ... pageInfo, pageSize: size, }); // When pageSize changes to get pageSize data getList({... searchParams(formValue), pageSize: size, pageNum: pageInfo.pageNum, }); }, [pageInfo], ); Const onSubmit = (value: any, errors: any) => {if (errors) {return; } setLoading(true); getList({ ... searchParams(value), pageNum: pageInfo.pageNum, pageSize: pageInfo.pageSize, }); };Copy the code

As you can see, getList is initialized, page change is called, and query is clicked, but useEffect is the second set of arguments. Listen for [a,b,c] initialization, a, B,c changes to execute the first function, so you don’t need to call the method every time the action is triggered. Just use the second parameter in useEffect. The getList method is triggered by changing the value of the second parameter array of useEffect every time a page/query is performed.

So the optimized code is as follows:

Const getList = useCallback(async (params: GetAppealRequest) => {setLoading(true); const res = await getAppeal(params); if (res? .code === 0) { setTableData(res? .data? .abnormalOrderAppealList || []); setPagination({ pageNum: res? .data? .pageNum, pageSize: res? .data? .pageSize, totalCount: res? .data? .totalCount, }); } setLoading(false); } []); && [pageInfo.pagenum, pageInfo.pagesize, formValue] getList() useEffect(() => {getList({... searchParams(formValue), pageNum: pageInfo.pageNum, pageSize: pageInfo.pageSize, }); }, [pageInfo.pageNum, pageInfo.pageSize, formValue]); Const handlePageChange = useCallback((page: number) => {setPagination({... pageInfo, pageNum: page, }); }, [pageInfo], ); const handlePagesizeChange = useCallback( (size: number) => { setPagination({ ... pageInfo, pageSize: size, }); }, [pageInfo], ); Const onSubmit = (value: any, errors: any) => {if (errors) {return; } setPagination({ ... pageInfo, pageNum: 1, }); setFormValue(value); };Copy the code

Is concise some, in fact, the key optimization here also not light to code simple, but the code written in the form above, the understanding of hooks may itself is not deep, so is idiomatic in order to achieve a certain function of some thinking and implement the business logic, is to have such a function, I’m just in order to achieve this function and using the API, Can not achieve it to patch it, which is against the original intention of its design.

feeling

Actually also is not a bug or mentioned in the article will explain what problem, although see the API documentation and have noticed that this kind of details, or must use the second parameter also can be used to think of it, but sometimes not have to use a scenario or thinking have no real change to come over, habit to think in class before to write hooks, And then suddenly a moment just suddenly understand something, but it’s like it doesn’t matter. Sometimes when YOU read the API and run the demo, if you use it in the project, you really know how to do it. Maybe you don’t know how to do it. Some things still need to think about and optimize, and you need to ask more why to really understand.

In fact, this little point is still a little dare not to post an article, because there seems to be no difficulty, just a small feeling of their own, but I feel like I need to record it