全面了解 React 新功能: Suspense 和 Hooks

React Fiber 是在 v16 的时候引入的一个全新架构，旨在解决异步渲染问题。


新的架构使得使得 React 用异步渲染成为可能，但要注意，这个改变只是让异步渲染成为可能。


但是React 却并没有在 v16 发布的时候立刻开启，也就是说，React 在 v16 发布之后依然使用的是同步渲染。


不过，虽然异步渲染没有立刻采用，Fiber 架构还是打开了通向新世界的大门，React v16 一系列新功能几乎都是基于 Fiber 架构。


说到这，也要说一下 同步渲染 和 异步渲染.


同步渲染 和 异步渲染


同步渲染

我们都知道React 是facebook 推出的， 他们内部也在大量使用这个框架，（个人感觉是很良心了，内部推动， 而不是丢出去拿用户当小白鼠）， 然后就发现了很多问题， 比较突出的就是渲染问题。


他们的应用是比较复杂的，组件树也是非常庞大， 假设有一千个组件要渲染， 每个耗费1ms, 一千个就是1000ms,由于javascript 是单线程的， 这 1000ms 里 CPU 都在努力的干活， 一旦开始，中间就不会停。 如果这时候用户去操作， 比如输入， 点击按钮， 此时页面是没有响应的。等更新完了， 你之前的那些输入就会啪啪啪一下子出来了。
这就是我们说的页面卡顿, 用起来很不爽， 体验不好。


这个问题和设备性能没有多大关系，归根结底还是同步渲染机制的问题。


目前的React 版本（v16.7）, 当组件树很大的时候，也会出现这个问题， 逐层渲染，逐渐深入，不更新完就不会停。

游客，如果您要查看本帖隐藏内容请回复

回复