React Suspense + 自定义Hook开启数据请求新方式。

ssh_晨曦时梦见兮

发布于 2020-04-11 21:05:57

1.6K0

发布于 2020-04-11 21:05:57

文章被收录于专栏：前端从进阶到入院前端从进阶到入院

过去

类组件

在React的类组件时代，请求数据的时机经常放在componentDidMount中，然后state中需要有一个变量记录当前是否正在请求接口，在请求的前后需要手动去改变这些状态，大概代码如下：

class App extends Component {
  state = {
    loading: false,
  }

  componentDidMount() {
    this.setState({
      data: null,
      loading: true,
    });
    axios.get('/api/test').then((data) => {
      this.setState({
        data,
        loading: false,
      });
    });
  }

  render() {
    return this.state.loading ? '正在加载中...' : (
      <Page data={data} />
    );
  }
}

复制代码

hook组件

自从React发布了Hook以来，这个组织代码逻辑的方式广受欢迎，在Hook时代我们可以把请求前后的loading状态变量在自定义hook中管理起来，代码示例：

const useRequest = (fn, dependencies = []) => {
  const [data, setData] = useState(defaultValue);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    
    fn()
      .then(res => {
        setData(res);
      })
      .finally(() => {
        setLoading(false);
      });
  }, dependencies);

  return { data, setData, loading };
};
复制代码

// App.js
function App() {
  const { loading, data } = useRequest(() => axios.get('/api/test'));
  return loading ? '正在加载中...' : (
    <Page data={data} />
  );
}

复制代码

未来

Suspense组件 + useSWR

React发布了Suspense以后，数据请求又有了新思路，我们可以在视图容器的外层包裹一层Suspense，在内部通过向外throw Promise的方式告知Suspense我们的组件还没有准备好，需要展示Loading状态。

具体的代码可以看这里：codesandbox.io/s/react-swr…

// Router.js
import React, { Suspense } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { Spin } from "antd";
import Author from "./Pages/Author";
import Table from "./Pages/Table";
import Layout from "./Layout";

export default function App() {
  return (
    <Router>
      <Layout>
        <Suspense fallback={<Spin tip="正在拼命获取数据，请稍后..." />}>
          <Switch>
            <Route exact path="/">
              <Author />
            </Route>
            <Route exact path="/table">
              <Table />
            </Route>
          </Switch>
        </Suspense>
      </Layout>
    </Router>
  );
}

复制代码

// pages/Author
import React from "react";
import useSWR from "../use-swr";

export default function Author() {
  const { data } = useSWR("/api/user");

  return (
    <div>
      <span>Hello {data.userName}</span>
    </div>
  );
}
复制代码

import useSWR from "swr";
import fetcher from "./fetcher";

export default url => {
  return useSWR(url, fetcher, { suspense: true });
};
复制代码

// fetcher
const fetcher = url => {
  let responseData;

  switch (url) {
    case "/api/user":
      responseData = {
        userName: "ssh"
      };
      break;
    default:
      break;
  }

  return new Promise(resolve => {
    setTimeout(() => {
      resolve(responseData);
    }, 2000);
  });
};

export default fetcher;

复制代码

其实这个Demo中就是使用了swr这个库，对配置项进行了一个简单的封装，开启了suspense模式

第二项参数所需要的fetcher就是自己定义的返回promise的逻辑。

在这种Suspense模式下，我们可以轻松的实现Loading状态的管理，而且不需要在Page组件中再去关心和声明加载中的组件。

关于swr这个库的具体分析文章可以查看这篇：精读《Hooks 取数 - swr 源码》

这个Demo中在路由进入过后如果再次进入，数据会直接显示之前请求过的，你会发现这非常像Vue中的keep-alive带来的效果，这是因为swr这个库在suspense模式下默认做了数据的缓存，如果想要关掉它目前还没在文档中看到相应的配置。

自己实现简易的useSWR

// use-my-swr
import { useState, useEffect } from "react";

export default (url, fetcher) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetcher(url)
      .then(result => {
        setData(result);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [url, fetcher]);

  if (loading) {
    throw Promise.resolve(null);
  } else {
    return { data };
  }
};

复制代码

其实和上面写的useRequest相比，就是在loading的时候向外抛出一个promise，其他并没有什么改变。

使用：

import React from "react";
import useSWR from "../use-my-swr";
import fetcher from "../fetcher";

export default function Author() {
  const { data } = useSWR("/api/user", fetcher);

  return (
    <div>
      <span>Hello {data && data.userName}</span>
    </div>
  );
}
复制代码