本系列是在观看React Conf的随笔记录, 一共六篇。这几天整理了下来,内容全来自每个React Conf的Speaker(感谢🙏). 这其中也包含一些自己的想法。若有错误请评论区指出。 当然还是建议亲自去看一下新鲜出炉的React Conf 2021 - Replay
在团队开发react native中发现了线程模型的缺陷,在web中,js单线程,而在native平台上,一个应用运行在多个线程之上,这意味着为了在native平台上得到更好有用户体验(更好的渲染性能),我们需要一个能够让我们在多个线程中协调的工作模型。
因此并发出现了。并发可以让程序中断当前的任务,切换到另一个更高优先级的线程处理任务,或者运行多个渲染任务,这样就可以充分的应用移动平台的多线程特性,并且可以较好的满足移动端用户对native平台的期望。
并发渲染甚至在网络层面都有极大的好处,native平台通常都内置一个任务调度程序,跨多个线程进行管理,由于web是单线程的,不需要内置任务调度器。基于在native平台的并发渲染优化技术,在web上定义一个web任务调度程序,在过去的两年已经与浏览器厂商集成了Task API。这个api和native平台的任务调度有类似的效果。
developer.mozilla.org/zh-CN/docs/…
这个任务调度器的出现让web环境下的并发渲染成为了可能。
在一开始,我们只是认为这样的模式(并发)可以提高渲染性能,提高复杂交互的UI响应时间。但是当我们在研究并发与网络相关的特性时候,例如: code split,fetch data, streaming server rendering, 以及server components, 事实证明这些功能都可以基于concurrent实现。
所以Suspense出现了。
并发渲染的同时,在后台进行数据获取, 不阻塞用户看到页面。
在Suspense之上,我们可以构建出以上所有的并发特性。
所以,在一开始并没有想过把并发也用在network这种异步操作中,只是想使用并发来提升渲染的性能。但是在构建并发模型的时候需要考虑在React中的使用场景,所以以一种不同的方式把Concurrent这个模式加入了React。这给予了我们新的编程模型,具有意想不到的Feature.
当然, Suspense在React 18支持后,下一步是是把Suspense引入React Native.
在这个过程有意思的是,concurrent rendering的灵感来自于native平台(提升React Native 在native平台的渲染性能),而在web中实现并发的时候产生了Suspense这样优秀的概念。在未来把Suspense引入React Native的时候, web又反过来影响了native。
这样互相提升促进的例子有很多。在其他平台(web/native/desktop/vr)的React实践也让React得到了更多的提升。React Native对渲染性能提升的操作带来了并发模型, 并发模型应用在web中的产物是Suspense。
这其实就是React的, 多平台愿景。
React will get better on each platform by improving React on every platform.
React is more than a library.
React is a paradigm for building user interfaces.
那么说了那么多, React Native对并发特性的支持如何?
很遗憾,现在还不能很好的支持并发特性。但仅仅只是技术上的限制: 在web中js是单线程的,也就是同步的,但在native平台中总是异步的(多线程)。
所以解决方案是需要让native平台变成同步的,以便React运行时能够直接控制线程模型的用例, 例如手势操作。以及从并发中在布局方面获得更大的收益。
那么实际上,React Native团队在重写React Native, 以实现同步这个特性。目前这个架构已经在facebook中应用。
React 18将在明年与新的React Native架构(异步改同步)一起发布。