超性感的React Hooks（六）自定义hooks的思维方式

最新推荐文章于 2024-08-29 19:25:10 发布

这波能反杀

最新推荐文章于 2024-08-29 19:25:10 发布

阅读量1.6k

点赞数 1

分类专栏：冲吧React 文章标签：前端 react react-hooks

本文链接：https://blog.csdn.net/fedlover/article/details/103347904

版权

本文探讨了React Hooks中的自定义hooks如何封装逻辑片段，以解决页面初始化时接口加载的通用处理。通过示例展示了如何使用自定义hooks封装请求逻辑，并对比了React发展历程中不同阶段的逻辑复用方案，如mixin、高阶组件和render props，强调自定义hooks是最佳解决方案。此外，文章还阐述了自定义hooks与函数式编程思想的共通之处，并鼓励读者理解并应用这种思维到大型项目中。

摘要由CSDN通过智能技术生成

今天Spenser在公众号里说，今年许多公司都在裁员。市场上供大于求，但是，好多企业还是招不到人。真正的人才，市面上太稀缺了。这句话真的深有体会。我们公司想要招一个Java的高级开发，招了一个多月都没找到满意的。真的痛苦。

出现这种局面，两极分化就会日渐严重。就以前端行业来看，厉害的人，会越来越难找，也会越来越值钱。而普通的人，混口饭吃都不容易。

还是那句话说得对，外面的世界很精彩，可精彩是属于真正厉害的人的

1

上一篇文章留下了一个思考题：在实践场景中，几乎每个页面都会在初始化时加载至少一个接口，而这个接口有一些统一的处理逻辑可以抽离，例如请求成功，返回数据，请求失败，异常处理，特定时机下刷新。我们如何利用自定义hooks来封装这个场景？

直接给出我的建议答案。

import {
   useState, useEffect} from 'react';

export default function useInitial<T, P>(
  api: (params: P) => Promise<T>,
  params: P,
  defaultData: T
) {
   
  const [loading, setLoading] = useState(true);
  const [response, setResponse] = useState(defaultData);
  const [errMsg, setErrmsg] = useState('');

  useEffect(() => {
   
    if (!loading) {
    return };
    getData();
  }, [loading]);

  function getData() {
   
    api(params).then(res => {
   
      setResponse(res);
    }).catch