19新版教育培训风格演示站

标题: 全面了解 React 新功能: Suspense 和 Hooks [打印本页]

作者: Tommy子言 时间: 2019-1-11 16:32
标题: 全面了解 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）, 当组件树很大的时候，也会出现这个问题，逐层渲染，逐渐深入，不更新完就不会停。

作者: neoconex 时间: 2022-1-2 23:39
回复

欢迎光临 19新版教育培训风格演示站 (http://47.100.112.22/demo/train/)