image.png

这里推荐两个强大的 React Hooks 库：React Use 和 Umi Hooks。它们都实现了很多生产级别的自定义 Hook，非常值得学习。

基本定义

一个简单的自定义Hook

  1. function useBodyScrollPosition() {
  2.   const [scrollPosition, setScrollPosition] = useState(null);
  4.   useEffect(() => {
  5.     const handleScroll = () => setScrollPosition(window.scrollY);
  6.     document.addEventListener('scroll', handleScroll);
  7.     return () =>
  8.       document.removeEventListener('scroll', handleScroll);
  9.   }, []);
  11.   return scrollPosition;
  12. }

通过观察，我们可以发现自定义 Hook 具有以下特点：

  • 表面上：一个命名格式为 useXXX 的函数，但不是 React 函数式组件
  • 本质上：内部通过使用 React 自带的一些 Hook （例如 useState 和 useEffect ）来实现某些通用的逻辑

如果你发散一下思维，可以想到有很多地方可以去做自定义 Hook：DOM 副作用修改/监听、动画、请求、表单操作、数据存储等等。

内部原理

v2-b4b53ed3068ce650978c713d6ac2b5a0_b.gif
可以看到，即便我们切换到了自定义 Hook 中，Hook 链表的生成依旧没有改变。再来看看重渲染的情况：

v2-04a5b174d7250948c7918c82ab3348d7_b.gif

同样地，即便代码的执行进入到自定义 Hook 中，我们依然可以从 Hook 链表中读取到相应的数据，这个”配对“的过程总能成功。

自定义 Hook 本质上只是把调用内置 Hook 的过程封装成一个个可以复用的函数，并不影响 Hook 链表的生成和读取。

自定义封装

  1. import { useState, useCallback } from 'react';
  3. // 使用示例:
  5. // export default function UserList() {
  6. //     const {
  7. //       execute: fetchUsers,
  8. //       data: users,
  9. //       loading,
  10. //       error,
  11. //     } = useAsync(async () => {
  12. //       const res = await fetch("https://reqres.in/api/users/");
  13. //       const json = await res.json();
  14. //       return json.data;
  15. //     });
  17. //     return (
  18. //       // 根据状态渲染 UI...
  19. //     );
  20. //   }
  22. function useFetch(asyncFunction) {
  23.   // 设置三个异步逻辑相关的 state
  24.   const [data, setData] = useState(null);
  25.   const [loading, setLoading] = useState(false);
  26.   const [error, setError] = useState(null);
  27.   // 定义一个 callback 用于执行异步逻辑
  28.   const execute = useCallback(() => {
  29.     // 请求开始时，设置 loading 为 true，清除已有数据和 error 状态
  30.     setLoading(true);
  31.     setData(null);
  32.     setError(null);
  33.     return asyncFunction()
  34.       .then(response => {
  35.         // 请求成功时，将数据写进 state，设置 loading 为 false
  36.         setData(response);
  37.         setLoading(false);
  38.       })
  39.       .catch(error => {
  40.         // 请求失败时，设置 loading 为 false，并设置错误状态
  41.         setError(error);
  42.         setLoading(false);
  43.       });
  44.   }, [asyncFunction]);
  46.   return { execute, loading, data, error };
  47. }
  48. export default useFetch;
  1. import { useState, useEffect } from 'react';
  3. // 获取横向，纵向滚动条位置
  4. const getPosition = () => {
  5.   return {
  6.     x: document.body.scrollLeft,
  7.     y: document.body.scrollTop,
  8.   };
  9. };
  10. const useScroll = () => {
  11.   // 定一个 position 这个 state 保存滚动条位置
  12.   const [position, setPosition] = useState(getPosition());
  13.   useEffect(() => {
  14.     const handler = () => {
  15.       setPosition(getPosition(document));
  16.     };
  17.     // 监听 scroll 事件，更新滚动条位置
  18.     document.addEventListener("scroll", handler);
  19.     return () => {
  20.       // 组件销毁时，取消事件监听
  21.       document.removeEventListener("scroll", handler);
  22.     };
  23.   }, []);
  24.   return position;
  25. };
  29. import React, { useCallback } from 'react';
  30. import useScroll from './useScroll';
  32. function ScrollTop() {
  33.   const { y } = useScroll();
  35.   const goTop = useCallback(() => {
  36.     document.body.scrollTop = 0;
  37.   }, []);
  39.   const style = {
  40.     position: "fixed",
  41.     right: "10px",
  42.     bottom: "10px",
  43.   };
  44.   // 当滚动条位置纵向超过 300 时，显示返回顶部按钮
  45.   if (y > 300) {
  46.     return (
  48.         Back to Top
  50.     );
  51.   }
  52.   // 否则不 render 任何 UI
  53.   return null;
  54. }
  1. import React, { useEffect, useCallback, useMemo, useState } from "react";
  2. import { Select, Table } from "antd";
  3. import _ from "lodash";
  4. import useAsync from "./useAsync";
  6. const endpoint = "https://myserver.com/api/";
  7. const useArticles = () => {
  8.   // 使用上面创建的 useAsync 获取文章列表
  9.   const { execute, data, loading, error } = useAsync(
  10.     useCallback(async () => {
  11.       const res = await fetch(`${endpoint}/posts`);
  12.       return await res.json();
  13.     }, []),
  14.   );
  15.   // 执行异步调用
  16.   useEffect(() => execute(), [execute]);
  17.   // 返回语义化的数据结构
  18.   return {
  19.     articles: data,
  20.     articlesLoading: loading,
  21.     articlesError: error,
  22.   };
  23. };
  24. const useCategories = () => {
  25.   // 使用上面创建的 useAsync 获取分类列表
  26.   const { execute, data, loading, error } = useAsync(
  27.     useCallback(async () => {
  28.       const res = await fetch(`${endpoint}/categories`);
  29.       return await res.json();
  30.     }, []),
  31.   );
  32.   // 执行异步调用
  33.   useEffect(() => execute(), [execute]);
  35.   // 返回语义化的数据结构
  36.   return {
  37.     categories: data,
  38.     categoriesLoading: loading,
  39.     categoriesError: error,
  40.   };
  41. };
  42. const useCombinedArticles = (articles, categories) => {
  43.   // 将文章数据和分类数据组合到一起
  44.   return useMemo(() => {
  45.     // 如果没有文章或者分类数据则返回 null
  46.     if (!articles || !categories) return null;
  47.     return articles.map((article) => {
  48.       return {
  49.         ...article,
  50.         category: categories.find(
  51.           (c) => String(c.id) === String(article.categoryId),
  52.         ),
  53.       };
  54.     });
  55.   }, [articles, categories]);
  56. };
  57. const useFilteredArticles = (articles, selectedCategory) => {
  58.   // 实现按照分类过滤
  59.   return useMemo(() => {
  60.     if (!articles) return null;
  61.     if (!selectedCategory) return articles;
  62.     return articles.filter((article) => {
  63.       console.log("filter: ", article.categoryId, selectedCategory);
  64.       return String(article?.category?.name) === String(selectedCategory);
  65.     });
  66.   }, [articles, selectedCategory]);
  67. };
  69. const columns = [
  70.   { dataIndex: "title", title: "Title" },
  71.   { dataIndex: ["category", "name"], title: "Category" },
  72. ];
  74. export default function BlogList() {
  75.   const [selectedCategory, setSelectedCategory] = useState(null);
  76.   // 获取文章列表
  77.   const { articles, articlesError } = useArticles();
  78.   // 获取分类列表
  79.   const { categories, categoriesError } = useCategories();
  80.   // 组合数据
  81.   const combined = useCombinedArticles(articles, categories);
  82.   // 实现过滤
  83.   const result = useFilteredArticles(combined, selectedCategory);
  85.   // 分类下拉框选项用于过滤
  86.   const options = useMemo(() => {
  87.     const arr = _.uniqBy(categories, (c) => c.name).map((c) => ({
  88.       value: c.name,
  89.       label: c.name,
  90.     }));
  91.     arr.unshift({ value: null, label: "All" });
  92.     return arr;
  93.   }, [categories]);
  95.   // 如果出错，简单返回 Failed
  96.   if (articlesError || categoriesError) return "Failed";
  98.   // 如果没有结果，说明正在加载
  99.   if (!result) return "Loading...";
  1. import { useEffect, useState, useReducer, useRef, useContext, useCallback, useMemo } from 'react';
  2. import M from '@block/utils';
  3. import Big from 'big.js';
  4. import { useDebounce } from 'react-use';
  5. import { JD_SUPPLIER_CODE, MATERIEL_TEMPLATE_CODE } from '@/src/constant';
  6. import fetchWithCache from './fetchWithCache';
  7. import URL from '../../../url';
  9. const ERROR_MESSAGE_MAP = {
  10.   cityAccountFlag: {
  11.     message: '此行没有进行核算城市配置，如果需要的话请联系对应财务FP在海鸥的“核算城市配置”界面进行配置。',
  12.     type: 'info',
  13.   },
  14.   coa: {
  15.     message: '没有获取到 COA 科目，请联系FP维护！',
  16.     type: 'error',
  17.   },
  18.   budget: {
  19.     message: '没有获取到预算科目，请联系FP维护！',
  20.     type: 'error',
  21.   },
  22.   budgetType: {
  23.     message: '此行品类为资产黑名单，不允许选择当前预算项目&扩展项目组合，请重新选择，如有疑问请联系您的财务FP！',
  24.     type: 'error',
  25.   },
  26.   delivery: {
  27.     message: '该商品暂时无法配送至此地址！',
  28.     type: 'error',
  29.   },
  30.   stock: {
  31.     message: '商品库存不足，请重新调整数量！',
  32.     type: 'error',
  33.   },
  34.   offsale: {
  35.     message: '商品已下架，无法购买!',
  36.     type: 'error',
  37.   },
  38.   sale: {
  39.     message: '该商品暂不支持售卖！',
  40.     type: 'error',
  41.   },
  42.   material: {
  43.     message: '该物料已失效，请删除或重新选择物料后提交申请',
  44.     type: 'error',
  45.   },
  46. };
  48. function errorReducer(state, action) {
  49.   const tempState = state;
  50.   const { type, show } = action;
  51.   if (ERROR_MESSAGE_MAP[type]) {
  52.     tempState[type] = show ? ERROR_MESSAGE_MAP[type] : undefined;
  53.   }
  55.   return {
  56.     ...tempState,
  57.   };
  58. }
  59. export default function useValidateProduct(
  60.   data,
  61.   onChange,
  62.   isKuaiLv,
  63.   isXiaoXiang,
  64.   commonInfo,
  65.   isNon,
  66.   onFetchJDGoodsStockStatus,
  67. ) {
  68.   const [errors, dispatchError] = useReducer(errorReducer, {});
  69.   const [loading, setLoading] = useState(false);
  70.   // 采购数量更改 如果是京东商品 校验京东库存
  71.   useEffect(() => {
  72.     const fetchJDStock = async () => {
  73.       const res = await M.$fetch(URL.JD.STOCK, { goodsCode, goodsQuantity: quantity, reqAddressResp });
  74.       onChange({ goodStockStatus: res.goodStockStatus, prLineNo });
  75.     };
  77.     if (isJD) {
  78.       fetchJDStock();
  79.     }
  80.   }, [quantity]);
  82.   // *******************************✂️ 华丽分割线 ✂️*************************
  83.   const errorArray = Object.keys(errors)
  84.     .map(key => errors[key])
  85.     .filter(e => e);
  87.   return [loading, errorArray];
  88. }
  1.   const [computing, errors] = useValidateProduct(
  2.     data,
  3.     onChange,
  4.   );

References

https://zhuanlan.zhihu.com/p/134030294