利用React 自定义Hooks实现业务逻辑复用实例

最新推荐文章于 2024-08-07 08:45:40 发布

峰华前端工程师

最新推荐文章于 2024-08-07 08:45:40 发布

阅读量3.6k

点赞数 6

分类专栏：前端文章标签： react react hooks 前端自定义hooks javascript

本文链接：https://blog.csdn.net/fengqiuzhihua/article/details/103511209

版权

本文通过一个请求远程API数据的例子，演示如何使用React自定义Hooks将业务逻辑复用。文章详细介绍了从常规hooks到自定义useRequest Hook的改造过程，展示了如何减少代码重复，提高组件的可读性和可维护性。

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

简介

React Hooks 除了可以给函数式组件赋予状态和生命周期管理外，最重要的一点是可以把共用的逻辑处理代码抽离出来给不同的视图组件进行使用，它的目的和 HOC 和 Render Props 基本相同。这篇文章将以请求远程API数据为例，最后抽离出公共的数据请求的自定义 hook 以便不同的组件需要获取数据时，可以共用一套逻辑。

适用读者

本文的适用读者为：

有 React 的基础
了解 useEffect 和 useState 的使用方法
一颗求知的心

请求数据的例子

本文的完整代码和运行示例请点击下方按钮查看：

更完善的 useRequest Hook 可以参考我的开源项目:

Github: react-request-hook-client

需求

假设我们有一个组件，需要同时加载 Posts (博客文章) 和 Todos (待办事项) 列表，每种展示5条标题，并根据加载状态显示loading组件。首先我们看使用一般hooks的方式。

定义 States

首先我们定义需要的 states:

  // PostsAndTodos.js
  const [posts, setPosts] = useState([]);
  const [isPostsLoading, setIsPostsLoading] = useState();
  const [todos, setTodos] = useState([]);
  const [isTodosLoading, setIsTodosLoading] = useState();

posts 用来保存远程加载的文章数据，isPostsLoading 保存文章数据的加载状态
todos 保存待办事项，isTodosLoading保存待办事项数据的加载状态
这里我们定义了4个类似的状态

加载 Posts

我们使用 useEffect 来请求 posts 数据：

  // PostsAndTodos.js
  useEffect(() => {
   
    const loadPosts = async () => {
   
      setIsPostsLoading(true);
      try {
   
        let response = await fetch(