React 的未来，与 Suspense 同行-白红宇

作者：Lusan Das

翻译：疯狂的技术宅

原文：

未经允许严禁转载

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

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

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

如何使用 Suspense 获取数据

如何使用 react-cache

我已经很兴奋了！但是在我们进行深入探讨之前，先来快速回顾一下。

React Hooks

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

由于有了用函数编写所有内容的概念，使得编写的代码更加模块化，更易于维护

不鼓励使用和其他使代码难以理解的复杂功能

放弃使用复杂的，如 componentDidMount，componentDidUpdate 等，这会使我们写重复的代码

如果你想更详细地了解这些，请。

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

CodeSandbox上的演示：

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-6m2gjimport 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 (    
          
     
      
           
             
      
       Loading...
      
     
}>          
               
               
                   
    
      );}const rootElement = document.getElementById("root");ReactDOM.render(
    , rootElement);复制代码

如果你想运行它的话，可以访问。

如果我们检查演示中的代码，就会看到：


    
     Loading...}>  
       
       
     
    复制代码

它就像用 Suspense 包装组件一样简单。我们用 React.lazy() 懒加载了一些组件： TodoList， CompletedList， AddNewTask。由于在内部它分别为每个组件生成 bundle，因此在网络较慢的条件下，可能需要一些时间去加载它们。

Suspense 将通过显示 fallback （例如 Loading ...）或其他任何组件（如 spinner 或类似组件）来自动处理。

深入了解 React 的未来

前面的简短回顾已经令人非常激动了。现在让我们为 Suspense 带来更多乐趣。

Suspense 和 react-cache

等等，我们还没有讲到 Suspense ？那么如果我告诉你 Suspense 在调用 API 时也可以处理我们的加载状态呢？不过在此之前我们需要深入研究并更好地理解它。

经过一番挖掘和研究，我终于找到了的 GitHub 存储库，我想直接引用他的：

React Suspense 是组件在从缓存加载数据时暂停渲染的通用方法。

它解决了当渲染是 I/O 绑定时的问题。

好的，“从缓存加载数据”给了我一个提示，但我需要更多关于如何真正处理API的信息。

在他的中讲授了一个重要概念：如果我们抛出一个 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 
    
     Article
    
;}const Articles = () => {  return (    
    
          {/* Yay promise is thrown */}      
     
      
       loading...
      
}>        
            
         
    
  );};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 
    
     Article
    
;}const Articles = () => {  return (    
          
     
      
       loading...
      
}>        
            
         
    
  );};export default Articles;复制代码

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

好吧，为了让 Suspense 知道它必须显示加载状态，所需要的只是一个 promise。在 promise 解决之前，它将继续显示加载状态。

但是，这是实验性的。我相信你会遇到错误，所以不要担心，很明显 react-cache 仍处于开发阶段。

一点要小心，确保在组件内部使用 read 方法，否则，它会抛出一个错误。

// A snippet from the React-cache libraryfunction 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 的一部分功能?。

React Hooks

React.lazy

Suspense

深入了解 React 的未来

Suspense 和 react-cache

恭喜！

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