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

过去

类组件

在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>
  );
}
复制代码

小结

这篇文章只是在Suspense到来以前的一点开胃前菜，在React的发展长河中，开发者经历了各类各样的写法，HOC、render-props、hook，其最终的目的其实仍是让咱们写的代码更加易于阅读和维护，让开发者越爽越好。

Hook和Suspense碰撞在一块儿，让组件内部的逻辑和请求、等待内部的状态完全解耦开来了，相比之前的类组件，代码变的愈来愈精简。

期待React团队的进一步动做吧！

参考文章：
React Concurrent 模式抢先预览上篇: Suspense the world
精读《Hooks 取数 - swr 源码》