useMemo和useCallback使用区别

1、useMemo，根据变量，渲染新的数据结构或返回一个组件（如下例）

  /**
   * 获取对应的table表头
   */
  const _getColumns = useMemo(() => {
    switch (currentTab) {
      case '0':
        return columns;
      case '1':
      case '2':
        columns.splice(4, 0,
          {
            title: intl.formatMessage({ id: 'Reviewer' }),
            dataIndex: 'auditBy',
            align: 'center',
            ellipsis: true
          },
          {
            title: intl.formatMessage({ id: 'Review Time' }),
            dataIndex: 'auditTime',
            align: 'center',
            ellipsis: true
          }
        );
        return columns;
      default:
        return columns;
    }
  }, [currentTab]);

2、useCallback，一般用于接口的请求，根据变量来进行请求

  const getDataList = useCallback(
    async (
      productCatalogId: string | number | undefined,
      keyword: string,
      pageNum: number,
      pageSize: number,
      specValueList?: Array<any>,
      currentBrand?: any
    ) => {
      setProductLoading(true);
      const res = await product({
        brand: currentBrand ? currentBrand : undefined,
        productCatalogId,
        searchKeyWithOutDescription: keyword || '',
        pageNum,
        pageSize,
        isAggBomCode: isAggBomCode,
        needPriceInfo: needPriceInfo,
        releaseStatus,
        specValueList:
          Array.isArray(specValueList) && specValueList.length > 0 ?
            uniqBy(specValueList, 'id') :
            undefined
      });
      const { code, msg, data } = res || {};
      if (code === 0) {
        if (data.records && Array.isArray(data.records)) {
          if (pageNum === 1) {
            // 切换目录的旧数据，在allSearchedProductList也需要保留
            const oldAllList = cloneDeep(allSearchedProductList);
            data.records.forEach((item: ProductType) => {
              const exit = oldAllList.find(
                (oldItem: ProductType) => oldItem?.id === item?.id
              );
              if (!exit) {
                oldAllList.push(item);
              }
            });
            setCurrentProduct(data.records || []);
            setAllSearchedProductList(oldAllList);

            if (Array.isArray(data.records)) {
              setRenderCount(
                data.records.length > defaultCount ?
                  defaultCount :
                  data.records.length
              );
              setScrollTop(0);
            }
          } else {
            const oldProductList = cloneDeep(currentProduct);
            // 切换目录的旧数据，在allSearchedProductList也需要保留
            const oldAllList = cloneDeep(allSearchedProductList);
            data.records.forEach((item: ProductType) => {
              const exit = oldProductList.find(
                (oldItem: ProductType) => oldItem?.id === item?.id
              );
              if (!exit) {
                oldProductList.push(item);
              }
              const exitAll = oldAllList.find(
                (oldItem: ProductType) => oldItem?.id === item?.id
              );
              if (!exitAll) {
                oldAllList.push(item);
              }
            });
            setCurrentProduct(oldProductList || []);
            setAllSearchedProductList(oldAllList);
          }
          setPageInfo({
            pages: data.pages,
            pageNum: data.current,
            pageSize: data.size
          });
        }
      } else {
        UNVMessageBox.msgBox({
          msg,
          iconType: 'error'
        });
      }
      setProductLoading(false);
    },
    [allSearchedProductList, pageInfo, releaseStatus]
  );