React 2019 年路线图发布！Hooks 明年一季度上线

出处丨前端之巅

你可能在之前的一些文章和演讲中听过“Hooks”、“Suspense”和“并发渲染”等新特性。 在这篇文章中，我们将介绍它们在 React 稳定版中的预期发布时间表。

发布时间表

• React 16.6: 用于代码拆分的 Suspense（已发布）
• React 16.7: React Hooks (2019 年第一季度)
• React 16.8: 并发模式 (2019 第二季度)
• React 16.9: 用于数据获取的 Suspense (2019 年中)

React 16.6：用于代码拆分的 Suspense

Suspense 是指 React 在组件等待其他事件发生时“暂停”渲染并显示加载指示器的新功能。在 React 16.6 中，Suspense 只支持一个用例：使用 React.lazy() 和 <React.Suspense> 延迟加载组件。

复制代码

// This component is loaded dynamically
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
 return (
 <React.Suspense fallback={<Spinner />}>
 <div>
 <OtherComponent />
 </div>
 </React.Suspense>
 );
}

自 7 月份以来，我们一直在 Facebook 内部使用 Suspense 进行代码拆分，并期望它能够保持稳定。代码拆分只是 Suspense 的第一步。我们对 Suspense 的长期愿景还包括让它处理数据获取（并与其他库集成，如 Apollo）。除了便利的编程模型，Suspense 还在并发模式下提供更好的用户体验。

React DOM：从 React 16.6.0 起可用。

React DOM Server：Suspense 还不能用在服务器端渲染器中，不过我们已经开始研究一种新的异步服务器端渲染器，它将支持 Suspense，但它是一个大型项目，可能需要 2019 年的大部分时间才能完成。

React Native：对于 React Native 来说，捆绑拆分的用处不是很大，但从技术上看，仍然可以使用 React.lazy() 和<Suspense>。

建议：如果你只进行客户端渲染，我们建议使用 React.lazy() 和 <React.Suspense> 对 React 组件进行代码拆分。如果进行服务器端渲染，则必须先等等了。

React 16.7：Hooks（2019 年第一季度）

Hooks 让你可以使用功能组件的状态和生命周期等特性，还可以在不引入额外嵌套的情况下在组件之间重用有状态逻辑。

复制代码

function Example() {
 // Declare a new state variable, which we'll call "count"
 const [count, setCount] = useState(0);

 return (
 <div>
 <p>You clicked {count} times</p>
 <button onClick={() => setCount(count + 1)}>
 Click me
 </button>
 </div>
 );
}

自 9 月份以来，我们一直在 Facebook 内部尝试使用 Hooks，我们预计不会出现重大错误。Hooks 仅在 React 16.7 alpha 版本中可用。预计一些 API 将在最终的 16.7 版本中发生变化。

Hooks 代表了我们对 React 未来的愿景，它们解决了 React 用户比较关心的一些问题（如“包装器地狱”、生命周期方法中的逻辑重复），以及我们在大规模优化 React 是遇到的问题（例如通过编译器内联组件的难点）。Hooks 不会弃用类，不过，如果 Hooks 能够取得成功，那么在将来的主要版本中，对类的支持有可能被移到单独的包中，从而减少 React 的默认包大小。

React DOM：支持 Hooks 的第一个 react 和 react-dom 版本是 16.7.0-alpha.0。我们希望在接下来的几个月内发布更多的 alpha 版本（在撰写本文时，最新版本为 16.7.0-alpha.2）。

React DOM Server：16.7 alpha 版本的 react-dom 通过 react-dom/server 完全支持 Hooks。

React Native：目前官方还不支持在 React Native 中使用 Hooks。

建议：如果你准备好了，建议你开始在新组件中尝试 Hooks。确保团队中的每个人都使用它们并熟悉相关文档。我们不建议将现有类重写为 Hooks，除非你计划要重写它们。

React 16.8：并发模式（2019 年第二季度）

并发模式在渲染组件树时不会阻塞主线程，因此让 React 应用程序更具响应性。它允许 React 中断长时间运行的渲染，以便处理高优先级的事件。并发模式还通过跳过快速连接上不必要的加载状态来改善 Suspense 的用户体验。

复制代码

// Two ways to opt in:

// 1. Part of an app (not final API)
<React.unstable_ConcurrentMode>
 <Something />
</React.unstable_ConcurrentMode>

// 2. Whole app (not final API)
ReactDOM.unstable_createRoot(domNode).render(<App />);

并发模式比 Hooks 要粗超一些，有些 API 还没有完全确定。在撰写本文时，我们不建议将其用于除早期实验之外的任何事情上。我们不希望并发模式存在很多错误，但请注意，在 <React.StrictMode> 中产生警告的组件可能无法正常工作。另外，我们已经看到，在使用并发模式时，其他代码中的性能问题会被误认为是并发模式本身的性能问题。例如，在并发模式下，setInterval(fn,1) 调用会产生糟糕的效果。我们计划发布更多有关诊断和解决这个问题的信息，并作为 16.8 发布文档的一部分。

并发模式是 React 愿景的重要组成部分。对于 CPU 受限的运行环境，它可以进行非阻塞渲染，并在渲染复杂组件树时保持应用程序的响应性。

React DOM：React 16.6 中以 unstable_ 为前缀的不稳定版本，但我们不建议尝试它，除非你愿意碰壁。16.7 alpha（没有 unstable_ 前缀）中包含了 React.ConcurrentMode 和 ReactDOM.createRoot，但我们可能会将前缀保留在 16.7 中，并且只会在 React 16.8 中将并发模式标记为稳定。

React DOM Server：并发模式不会直接影响服务器端渲染。

React Native：当前计划是延迟在 React Native 中启用并发模式，直到 React Fabric 项目接近完成。

建议：如果你希望在将来采用并发模式，那么可以先在 <React.StrictMode> 中包装一些组件子树，并修复生成的警告。通常我们不期待会立即兼容遗留代码。在 Facebook，我们打算在最近开发的代码库中使用并发模式，并在不久的将来继续让遗留代码在同步模式下运行。

React 16.9：用于数据获取的 Suspense (2019 年中)

如前所述，Suspense 是指 React 在组件等待其他事件发生时“暂停”渲染并显示加载指示器。在已经发布的 React 16.6 中，Suspense 唯一支持的用例是代码拆分。在未来的 16.9 版本中，我们还希望官方支持将其用于数据获取。我们将提供与 Suspense 兼容的“React Cache”参考实现，但你也可以自定义。像 Apollo 和 Relay 这样的数据获取库可以与 Suspense 集成，只要它们遵循我们定义的规范。

复制代码

// React Cache for simple data fetching (not final API)
import {unstable_createResource} from 'react-cache';

// Tell React Cache how to fetch your data
const TodoResource = unstable_createResource(fetchTodo);

function Todo(props) {
 // Suspends until the data is in the cache
 const todo = TodoResource.read(props.id);
 return <li>{todo.title}</li>;
}

function App() {
 return (
 // Same Suspense component you already use for code splitting
 // would be able to handle data fetching too.
 <React.Suspense fallback={<Spinner />}>
 <ul>
 {/* Siblings fetch in parallel */}
 <Todo id="1" />
 <Todo id="2" />
 </ul>
 </React.Suspense>
 );
}

// Other libraries like Apollo and Relay can also
// provide Suspense integrations with similar APIs.

即使是在 React 16.6 中，底层的 Suspense 机制（暂停渲染并显示回退）也已经表现得很稳定。我们已经将它用于生产环境的代码拆分几个月时间了。但是，用于数据获取的高级 API 仍然非常不稳定。React Cache 正在快速发生变化，并且至少还会再改变好几次。因为缺失了一些低级 API，导致高级 API 不可用。除非是为了早期的实验，否则我们不建议在任何地方使用 React Cache。请注意，React Cache 本身并不严格依赖于 React 版本，但是当前的 alpha 版本缺少一些基本功能，如果坚持使用，你很快就会碰壁。我们期望在 React 16.9 版本中能够有一些可用的东西。

最后我们希望通过 Suspense 来获取大多数数据，但要让所有集成都准备就绪需要很长的时间。在实际当中，我们希望进行渐进式的采用，并且是通过像 Apollo 或 Relay 这样的层，而不是直接采用。缺少高级 API 并不是唯一的障碍——我们还不支持一些重要的 UI 模式，例如在加载视图层次结构之外显示进度指示器。

React DOM 和 React Native：从技术上讲，兼容的缓存已经可以与 React 16.6 中的 <React.Suspense> 一起使用。但是，在 React 16.9 之前，可能不会有一个很好的缓存实现。如果你想冒险，可以尝试自己开发缓存。

React DOM Server：Suspense 在服务器端渲染器中还不可用。正如我们前面提到的，我们已经开始研究一个新的异步服务器端渲染器，它将支持 Suspense，但它是一个大型项目，需要 2019 年的大部分时间才能完成。

建议：等 16.9 版本发布，这样就可以使用 Suspense 进行数据获取。不要试图在 16.6 中使用 Suspense 功能。不过，当正式支持用于数据获取的 Suspense 时，用于代码拆分的现有<Suspense>组件也将能够显示数据的加载状态。