React发展蓝图,取代类别的Hooks将于明年上线

React官方近期在博客文章以及各地演讲,发布了诸多新功能消息,而现在于博客公布了这些新功能正式加入React 16.x的时间表,代码拆分Suspense已经在React 16.6中加入,用来取代类别的Hooks将于2019年第一季被集成进React 16中,而Suspense和并行渲染则预计会在第二季时加入。

目前已经加入React 16.6中的更新功能是代码拆分(Code Splitting)的Suspense。Suspense是指组件正处在等待阶段,而暂停渲染功能并显示加载指示符号。在React 16.6中,Suspense只支持使用React.lazy()和<React.Suspense>延迟加载组件的使用案例。

从7月以来,脸书便一直在自家应用程序程序码拆分使用Suspense,并在测试过程中尽可能改善该功能稳定性,而在React 16.6.3,代码拆分Suspense才进入稳定阶段。官方提到,代码拆分只是Suspense的第一步,未来还会让Suspense处理数据截取,并与类似Apollo等函数库集成,除了方便为程序开发模型的方便性,Suspense也可以在并行模式提供更好的开发者体验。

在10月的时候,React宣布要加入新功能Hooks已取代类别,而官方预计将在2019年第一季正式加入。Hooks提供开发者类似函数组件状态以及生命周期的功能,并允许开发者在组件之间重复使用有状态逻辑。脸书在9月开始进行Hooks功能的研究,目前也确定这项更新在实例上不会出现重大的错误,想尝鲜开发者可以先使用React 16.7 alpha版本。

官方提到,Hooks直接解决了React开发者体验问题,对React未来发展非常重要,包括渲染工具与高顺比特件的包装器地狱,或是生命周期方法的逻辑重复问题。官方仍然强调,他们不会弃用类别,若Hooks成功,类别未来可能会移动到独立套件中,来减少React默认套件的大小。

另外,官方预计,并行模式(Concurrent Mode)将在2019年第二季集成到React正式版中。并行模式对于受CPU限制的工作,通过不阻挡主要线程,允许非阻塞式渲染,以增加渲染组件树的响应性,而且也能让Suspense功能表现更好,当网络速度足够快速,可以减少加载指示符号闪烁。

并行模式目前缺乏官方说明文件,功能也不齐全,部分API仍待开发,React官方建议,并行模式只能用在实验上,而在<React.StrictMode>可能导致部分组件无法正常运行。由于并行模式依赖与主要线程调度器的合作,官方正与Chrome团队合作,最终会将该功能移入浏览器中。

在2019年中,React还会为组件数据截取(Data Fetching)支持Suspense功能,也就是说,当组件在进行数据截取的时候,将能暂停画面渲染。虽然在React 16.6中,
低端Suspense机制已经趋于稳定,脸书也将其用于产品代码拆分上数个月,但数据截取部分的SuspenseAPI仍非常不稳定,无法被用在正式环境上,而且与并行模式相同,也还没有发布关于数据截取的官方文件。

官方提到,部分各自组件API设计并非有独立意义,当所有功能都齐全后,才能看出之间的相关性。但采取逐步发布策略可以让开发者先测试,也帮助官方优化这些API。