React的16.x版本自从发布以后就风靡了整个业界。这个版本的新增功能中，最受欢迎的有Hooks、懒加载、Suspense和缓存API等。

不要以为本文又要教你怎么写Hooks，我要写的是对React未来的展望！如果你从未听过Hooks或者React中的其他新API，这篇文章会让你了解这些激动人心的未来。

接下来我们将介绍两个新概念，相关功能预计将在2019年第二季度发布：

如何使用Suspense获取数据
如何使用react-cache

虽然我迫不及待想要介绍这些功能，但之前我们还是先来铺垫一下。

React Hooks

React 16.8正式在稳定版中引入了Hooks。它在高层级上解决了一些问题：

它引入了使用函数编写所有内容的理念，使代码更加模块化、更易于维护。
它不鼓励使用HOC等难以理解的复杂函数。
它不再使用复杂的生命周期，如componentDidMount、componentDidUpdate等，免去了编写重复代码的麻烦。

想了解更多内容请点击此处：https://reactjs.org/docs/hooks-intro.html#motivation。

下面来看一个React Hooks的示例，看看使用它的典型应用长什么样！示例地址：https://codesandbox.io/embed/3rm5jk86wm?fontsize=14

React.lazy

这个名字起得真是恰如其分！当我们想懒加载组件时就可以用上它了：

const TodoList = React.lazy(() => import("./containers/todoList"));

在webpack中使用动态导入时就能用它做优化了。它能用来创建bundle，从而提高页面加载速度。下面是一个例子，只要在上面的Codesandbox演示中把导入改为以下内容即可：

const TodoList = React.lazy(() => import("./containers/todoList"));
const CompletedList = React.lazy(() => import("./containers/completedList"));
const AddNewTask = React.lazy(() => import("./containers/addNewTask"));

如下图所示，创建了许多独立的bundle：

Suspense

Suspense很好用，下面的代码就是很好的例子：

// https://codesandbox.io/s/new-6m2gj
import React, { useState, useEffect, Suspense } from "react";
import ReactDOM from "react-dom";
import todoListData from "./containers/todoList/todolistData";
import Header from "./containers/header";
import Clock from "./components/Clock";
import "./styles.css";

const TodoList = React.lazy(() => import("./containers/todoList"));
const CompletedList = React.lazy(() => import("./containers/completedList"));
const AddNewTask = React.lazy(() => import("./containers/addNewTask"));

function App() {
  const { todolist } = todoListData;
  const [todoListPayload, setTodoListPayload] = useState(todolist);
  const [completedTodoList, setCompletedTodoList] = useState([]);

  const addTodoTaskHandler = value => {
    // addTodoTaskHandler
  };

  const removeTodoTaskHandler = ({ id }) => {
    // Remove from the set of todo list
  };

  const completeTodoTaskHandler = ({ id }) => {
    // Get item to remove
  };

return (
    <div className="App">
      <Header title={"My Tasks"} />
      <Clock />
      <div className="PageLayout">
        <Suspense fallback={<div>Loading...</div>}>
          <TodoList
            payload={todoListPayload}
            completeTodoTaskHandler={completeTodoTaskHandler}
          />
          <CompletedList list={completedTodoList} />
          <AddNewTask addTodoTaskHandler={addTodoTaskHandler} />
        </Suspense>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

演示链接：https://codesandbox.io/s/new-6m2gj。

仔细检查示例中的代码，我们会看到：

<Suspense fallback={<div>Loading...</div>}>
  <TodoList
     payload={todoListPayload}
     completeTodoTaskHandler={completeTodoTaskHandler}
   />
  <CompletedList list={completedTodoList} />
  <AddNewTask addTodoTaskHandler={addTodoTaskHandler} />
</Suspense>

只要用Suspense包装组件就行了，就是这么简单。我们使用React.lazy()懒加载了一些组件——TodoList、CompletedList、AddNewTask。由于它会在内部为每个组件生成bundle，因此网络条件不佳的情况下可能需要花些时间来加载它们。

Suspense会自动处理加载延迟，显示像Loading…之类的组件作为fallback。

未来展望

铺垫结束！下面我们来看看Suspense还有什么好玩的内容。

Suspense和react-cache

其实Suspense在某个API被调用时也可以处理我们的加载状态。不过我们先要好好了解一下这个API。

经过一番搜索，我找到了Shawn Swyx Wang的GitHub库，这里直接引用他文档中的一段话：

React Suspense是组件从缓存中加载数据时暂停呈现的一种通行方法。
它解决的问题：渲染是和I/O绑定时的情况。

“从缓存中加载数据”是一个要点，但怎样真正控制这个API呢。

Kent C. Dodds在他的Egghead课程中讲授了一个重要的概念：如果我们抛出一个promise，Suspense会自动得知调用了一个API请求。

import React, { Suspense } from "react";

fetchArticles() {
  // Some fetch API fetching articles
}

let isRequestCalled = false;
function Content() {
  let result = [];
  if (!cache) {
    const promise = fetchArticles();
    isRequestCalled = true;
    throw promise; // Let suspense know
  }
  return <div>Article</div>;
}

当然，这种方法不是最佳选择，它还是有点不正规。所以我们改用react-cache来优化一下：

import React, { Suspense } from "react";

import { unstable_createResource as createResource } from "react-cache";

function fetchArticles() {
  // Some fetch API fetching articles
}

const politicalArticles = createResource(fetchArticles);

function Content() {
  const result = politicalArticles.read(someKey);
  return <div>Article</div>;
}

const Articles = () => {
  return (
    <div>
      <Suspense fallback={<div>loading...</div>}>
        <Content />
      </Suspense>
    </div>
  );
};

export default Articles;

react-cache中的createResource从回调中创建资源，返回一个promise。

所以只要一个promise就能让Suspense知道它必须显示加载状态；在promise被解析之前它将一直显示加载状态。

但这个功能还处于实验阶段。所以就算你遇到了错误也不用慌张，因为react-cache仍处于开发阶段。

需要注意，一定要在组件内部使用read方法；否则它会抛出一个错误。

// A snippet from the React-cache library

function readContext(Context, observedBits) {
  const dispatcher = ReactCurrentDispatcher.current;
  if (dispatcher === null) {
    throw new Error(
      'react-cache: read and preload may only be called from within a ' +
        "component's render. They are not supported in event handlers or " +
        'lifecycle methods.',
    );
  }
  return dispatcher.readContext(Context, observedBits);
}

点击此处查看react-cache源代码。

总结

现在我们已经了解了React未来的发展趋势，有一件事可以确定：React团队想要让API变得越来越简单。

我也很高兴能看到越来越多的库开始支持函数编程。这种模式肯定会彻底改变我们前端的编程方式。我也在关注React的并发改进——相关内容可查看官方文档。React-cache和Suspense就是属于并发react的功能。

英文原文：https://blog.logrocket.com/the-future-of-react-unfolding-with-suspense/

创作场景

React 的未来：与 Suspense 共舞