[关闭]
@qinyun 2018-11-28T18:26:32.000000Z 字数 4503 阅读 1228

React 16.x路线图发布

未分类

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

发布时间表

React 16.6：用于代码拆分的Suspense

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

  1. // This component is loaded dynamically
  2. const OtherComponent = React.lazy(() => import('./OtherComponent'));
  4. function MyComponent() {
  5.   return (
  6.     <React.Suspense fallback={<Spinner />}>
  7.       <div>
  8.         <OtherComponent />
  9.       </div>
  10.     </React.Suspense>
  11.   );
  12. }

自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组件进行代码拆分。如果进行服务器端渲染，则必须先等等了。

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

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

  1. function Example() {
  2.   // Declare a new state variable, which we'll call "count"
  3.   const [count, setCount] = useState(0);
  5.   return (
  6.    <div>
  7.      <p>You clicked {count} times</p>
  8.      <button onClick={() => setCount(count + 1)}>
  9.        Click me
  10.      </button>
  11.    </div>
  12.  );
  13. }

自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的用户体验。

  1. // Two ways to opt in:
  3. // 1. Part of an app (not final API)
  4. <React.unstable_ConcurrentMode>
  5.   <Something />
  6. </React.unstable_ConcurrentMode>
  8. // 2. Whole app (not final API)
  9. ReactDOM.unstable_createRoot(domNode).render(<App />);

并发模式比Hooks要粗超一些，有些API还没有完全确定。在撰写本文时，我们不建议将其用于除早期实验之外的任何事情上。我们不希望并发模式存在很多错误，但请注意，在中产生警告的组件可能无法正常工作。另外，我们已经看到，在使用并发模式时，其他代码中的性能问题会被误认为是并发模式本身的性能问题。例如，在并发模式下，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项目接近完成。

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

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

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

  1. // React Cache for simple data fetching (not final API)
  2. import {unstable_createResource} from 'react-cache';
  4. // Tell React Cache how to fetch your data
  5. const TodoResource = unstable_createResource(fetchTodo);
  7. function Todo(props) {
  8.   // Suspends until the data is in the cache
  9.   const todo = TodoResource.read(props.id);
  10.   return <li>{todo.title}</li>;
  11. }
  13. function App() {
  14.   return (
  15.     // Same Suspense component you already use for code splitting
  16.     // would be able to handle data fetching too.
  17.     <React.Suspense fallback={<Spinner />}>
  18.       <ul>
  19.         {/* Siblings fetch in parallel */}
  20.         <Todo id="1" />
  21.         <Todo id="2" />
  22.       </ul>
  23.     </React.Suspense>
  24.   );
  25. }
  27. // Other libraries like Apollo and Relay can also
  28. // 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 16.9之前，可能不会有一个很好的缓存实现。如果你想冒险，可以尝试自己开发缓存。

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

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

英文原文：https://reactjs.org/blog/2018/11/27/react-16-roadmap.html

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注