企业如何选择合适的技术方案?点击看专家聊数字化转型落地过程中的困难和解决办法 了解详情
写点什么

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

  • 2018 年 11 月 29 日
  • 本文字数:3733 字

    阅读完需:约 12 分钟

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 dynamicallyconst 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 dataconst 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>组件也将能够显示数据的加载状态。


更多内容,请关注前端之巅公众号(ID:frontshow)



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


12 月 7 日北京 ArchSummit 全球架构师峰会上,来自 Google、Netflix、BAT、滴滴、美团 等公司技术讲师齐聚一堂,共同分享“微服务、金融技术、前端黑科技、智能运维等相关经验与实践。详情点击 https://bj2018.archsummit.com/schedule


2018 年 11 月 29 日 00:223151
用户头像

发布了 731 篇内容, 共 395.5 次阅读, 收获喜欢 1940 次。

关注

评论 1 条评论

发布
暂无评论
发现更多内容

薇娅携手中国航天基金会与我们的太空 带你“益起探月,共舞九天“

Kubernetes初体验--用Kubernetes部署一个Web服务

网管

Kubernetes k8s Web 服务 Go 语言

产业新基建,撬动数字经济发展新机遇

京东科技开发者

人工智能 新基建 京东

第十周课后练习

饭桶

第十周学习总结

饭桶

Canal 组件简介与 vivo 帐号实践

vivo互联网技术

数据库 分布式 数据存储

深度剖析,为何C语言在开发领域的地位如此稳固

Philips

Python .net rust C语言 Go 语言

使用 Jira Service Management 管理资产,您需要知道的5件事

Atlassian

数字化转型 Atlassian Jira ITSM ITIL

源码 | 浅谈Webpack原理,以及loader和plugin实现。

梁龙先森

大前端 webpack

Linux 笔记(三): 软件安装

Leo

Linux 学习 大前端

CAP理论

DL

《我想进大厂》之Spring夺命连环10问

艾小仙

Java spring 程序员 面试 大厂

身为程序员还记得C语言经典算法(附带答案)吗?

ShenDu_Linux

c c++ 算法 编程语言

不懂源码?来看看阿里P8亲自手码的Spring源码解析整套笔记,高薪offer唾手可得!

比伯

Java 编程 架构 面试 计算机

「面试必备」最新整理出的腾讯C++后台开发面试笔记

linux大本营

c++ Linux 后台开发 架构师

Mac下Docker Desktop配置阿里云镜像加速器

jiangling500

Docker 阿里云镜像加速器

Mysql数据备份与恢复

张攀钦

MySQL

什么是物联网?常见IoT 物联网协议最全讲解

华章IT

物联网 IoT

架构师训练营第 1 期第 10 周总结

du tiezheng

极客大学架构师训练营

接口测试如何在json中引用mock变量

测试人生路

json 接口测试 Mock

架构师训练营第十周作业

文智

极客大学架构师训练营

一线大厂欺负程序员?京东单方面辞退38岁P7员工三次败诉

Java架构师迁哥

排查指南 | mPaaS 小程序提示“网络不给力”时该如何排查?

蚂蚁集团移动开发平台 mPaaS

小程序 网络 小程序生态 mPaaS

什么是低代码(Low-Code)?

阿里巴巴云原生

程序员 云原生 代码

使用resilio实现多集群的k8s pod数据双向非实时同步

东风微鸣

Kubernetes 探索与实践 openshift

我是如何使计算时间提速25.6倍的

白日梦想家

Python 代码优化 Numpy 代码加速

揭秘11.11监控排障利器 京东高稳定日志服务深度解析

京东科技开发者

云计算 DevOps 日志监控

C++语言中std::array的神奇用法总结,你需要知道!

华为云开发者联盟

容器 数组 函数

“摸爬滚打”多年,从月薪3K到30Kjava大神,我是怎么蜕变的?

比伯

Java 编程 架构 面试 计算机

架构师第一期作业(第 11 周)

Cheer

作业

Spring Boot 2.4.0正式发布,全新的配置文件加载机制(不向下兼容)

YourBatman

云原生 Spring Boot 新特性

React 2019年路线图发布!Hooks明年一季度上线_前端_React博客_InfoQ精选文章