React 的将来，与 Suspense 同行

做者：Lusan Das

翻译：疯狂的技术宅

原文：blog.logrocket.com/the-future-…

未经容许严禁转载

自从 React 团队发布他们的 16.x 愿景以来，已经风靡了整个社区。它添加了一些很是酷的东西：Hooks、惰性加载、Suspense 和缓存 API。

这不是又一篇关于如何编写 Hook 的文章，而是对 React 将来的期待！若是你从没有据说过 React Hooks 或其余新的 API，那么本文将会让你对 React 的将来感到兴奋。

随着文章的深刻，咱们将介绍两个新概念，预计它们将会在 2019 年第二季度发布：

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

我已经很兴奋了！可是在咱们进行深刻探讨以前，先来快速回顾一下。

React Hooks

在 React 16.8 中，Hooks 正式成为稳定版本的一部分。它在高层次上解决了一些问题：

• 因为有了用函数编写全部内容的概念，使得编写的代码更加模块化，更易于维护
• 不鼓励使用 HOCs 和其余使代码难以理解的复杂功能
• 放弃使用复杂的生命周期，如 componentDidMount，componentDidUpdate 等，这会使咱们写重复的代码

若是你想更详细地了解这些，请查看此处。

那么，让咱们看一下 React Hooks 的演示以及典型应用的外观！

CodeSandbox上的演示：codesandbox.io/embed/3rm5j…

React.lazy

这个名字真的是暴露了它的意图！当咱们想对组件进行惰性加载时会须要它：

const TodoList = React.lazy(() => import("./containers/todoList"));
复制代码

在 webpack 动态导入的帮助下就能够作到这些，它有助于建立 bundles ，从而提升页面的加载速度。让咱们作一个演示！回到前面 Codesandbox 的演示连接并将导入更改成如下内容：

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

请注意下图中独立的 bundle 是如何建立的！😄

使用 Webpack 建立的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);
复制代码

若是你想运行它的话，能够访问这个演示连接。

若是咱们检查演示中的代码，就会看到：

<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 将经过显示 fallback （例如 Loading ...）或其余任何组件（如 spinner 或相似组件）来自动处理。

深刻了解 React 的将来

前面的简短回顾已经使人很是激动了。如今让咱们为 Suspense 带来更多乐趣。

Suspense 和 react-cache

等等，咱们尚未讲到 Suspense ？那么若是我告诉你 Suspense 在调用 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>;
}

const Articles = () => {
  return (
    <div> {/* Yay promise is thrown */} <Suspense fallback={<div>loading...</div>}> <Content /> </Suspense> </div>
  );
};

export default Articles;
复制代码

固然，这不是处理代码的最佳方式；它看起来有点麻烦。所以让咱们试着用 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。

好吧，为了让 Suspense 知道它必须显示加载状态，所须要的只是一个 promise。在 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 的一部分功能😎。

欢迎关注前端公众号：前端先锋，获取前端工程化实用工具包。