React 的未来，与 Suspense 同行[每日前端夜话0x85]

疯狂的技术宅 前端先锋

每日前端夜话0x85 每日前端夜话，陪你聊前端。 每天晚上18:00准时推送。 正文共：1693 字 预计阅读时间： 5 分钟 作者：Lusan Das 翻译：疯狂的技术宅 来源：logrocket

自从 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 等，这会使我们写重复的代码 如果你想更详细地了解这些，请查看此处(https://reactjs.org/docs/hooks-intro.html#motivation)。

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

CodeSandbox上的演示：https://codesandbox.io/embed/3rm5jk86wm

CodeSandbox上的演示

React.lazy

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


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

在 webpack 动态导入的帮助下就可以做到这些，它有助于创建 bundles ，从而提高页面的加载速度。让我们做一个演示！回到前面 Codesandbox 的演示链接并将导入更改为以下内容：


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

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