设计React Hooks的风格，自己动手构建数据加载方案

2023-12-06 10:03:06

前言

React Hooks 自发布以来，因其简单符合直觉的 API 与灵活的组合能力，很快就在 LeanCloud 控制台的重构项目中得到了广泛使用。对于「从服务端加载组件所需数据」这一需求，因为最开始的需求比较简单，我们没有引入第三方库而是自己封装了一些 API 来实现。随着重构范围不断扩大，我们逐渐遇到了一些问题：

数据加载的逻辑散落在各个组件中，难以维护；
组件中过多的状态管理代码，导致代码难以阅读；
无法轻松处理异步数据，导致组件难以复用。

为了解决这些问题，我们决定设计一套 React Hooks 风格的数据加载方案，以便更轻松地管理状态、处理异步数据，让前端开发更加高效。

设计思路

我们在设计这套方案时，主要考虑了以下几个方面：

可重用性： 希望这套方案能够在不同的组件中轻松复用，而无需复制代码；
灵活性： 希望这套方案能够支持不同的数据加载方式，如同步加载、异步加载等；
易用性： 希望这套方案能够简单易用，让开发者能够快速上手。

基于这些考虑，我们设计了如下方案：

创建一个自定义 Hook，用于管理数据加载的状态；
在需要加载数据的组件中，使用这个 Hook 来获取数据；
当数据加载完成后，使用 Hook 来更新组件的状态。

实现细节

1. 创建自定义 Hook

首先，我们创建一个名为 useDataLoader 的自定义 Hook，用于管理数据加载的状态。这个 Hook 接收两个参数：

dataLoader：一个函数，用于加载数据。
initialData：加载数据之前的初始值。

useDataLoader Hook 内部使用 useState Hook 来管理数据加载的状态。当组件第一次渲染时，useDataLoader Hook 会调用 dataLoader 函数来加载数据。如果数据加载成功，则更新组件的状态；如果数据加载失败，则抛出错误。

2. 在组件中使用 Hook

在需要加载数据的组件中，我们可以使用 useDataLoader Hook 来获取数据。例如：

import { useDataLoader } from './useDataLoader';

const MyComponent = () => {
  const [data, isLoading, error] = useDataLoader(async () => {
    const response = await fetch('/api/data');
    return response.json();
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return <div>{JSON.stringify(data)}</div>;
};

export default MyComponent;

在这个例子中，我们使用 useDataLoader Hook 来加载 /api/data 接口的数据。如果数据加载成功，则渲染数据；如果数据加载失败，则渲染错误信息。

3. 处理异步数据

useDataLoader Hook 还支持处理异步数据。例如，我们可以使用 async/await 语法来加载数据：

import { useDataLoader } from './useDataLoader';

const MyComponent = () => {
  const [data, isLoading, error] = useDataLoader(async () => {
    const response = await fetch('/api/data');
    return response.json();
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return <div>{JSON.stringify(data)}</div>;
};

export default MyComponent;