内容简介:你可能在之前的一些文章和演讲中听过“Hooks”、“Suspense”和“并发渲染”等新特性。 在这篇文章中,我们将介绍它们在 React 稳定版中的预期发布时间表。Suspense 是指 React 在组件等待其他事件发生时“暂停”渲染并显示加载指示器的新功能。在 React 16.6 中,Suspense 只支持一个用例:使用 React.lazy() 和 <React.Suspense> 延迟加载组件。
你可能在之前的一些文章和演讲中听过“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 constOtherComponent = React.lazy(()=>import('./OtherComponent')); functionMyComponent(){ return( <React.Suspensefallback={<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 让你可以使用功能组件的状态和生命周期等特性,还可以在不引入额外嵌套的情况下在组件之间重用有状态逻辑。
复制代码
functionExample(){ // Declare a new state variable, which we'll call "count" const[count, setCount] = useState(0); return( <div> <p>You clicked {count} times</p> <buttononClick={()=>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 constTodoResource = unstable_createResource(fetchTodo); functionTodo(props){ // Suspends until the data is in the cache consttodo = TodoResource.read(props.id); return<li>{todo.title}</li>; } functionApp(){ 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>
组件也将能够显示数据的加载状态。
更多内容,请关注前端之巅公众号(ID:frontshow)
英文原文: https://reactjs.org/blog/2018/11/27/react-16-roadmap.html
12 月 7 日北京 ArchSummit 全球架构师峰会上,来自 Google、Netflix、BAT、滴滴、美团 等公司技术讲师齐聚一堂,共同分享“微服务、金融技术、前端黑科技、智能运维等相关经验与实践。详情点击 https://bj2018.archsummit.com/schedule
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Cult of the Amateur
Andrew Keen / Crown Business / 2007-6-5 / USD 22.95
Amateur hour has arrived, and the audience is running the show In a hard-hitting and provocative polemic, Silicon Valley insider and pundit Andrew Keen exposes the grave consequences of today’s......一起来看看 《The Cult of the Amateur》 这本书的介绍吧!