关于页面展示
我们知道页面产生变化以及页面的一些动画展示都是由一张一张图片构成的,一般的显示器和浏览器的刷新频率在60帧 当然也视电脑情况而定。 在一秒60帧的情况下,人的肉眼是不会感觉到有卡顿的情况。 但是如果在这一张张图片的变化速度过慢就会导致用户有卡顿的感觉。
- 在react中一个线程内包括JavaScript的执行,GUI的渲染,用户事件的响应,键盘事件的响应,layout,paint,raf(requestAnimationFrame),以及react的一些耗时操作包括diff算法,reconciliation的执行等。也就代表着GUI的渲染和javascript的执行实际上是互斥,一旦javascript的执行速度过慢,就会阻塞GUI的渲染速度,在页面的帧迟迟不更新的情况下,也就会导致用户感觉到明显的卡顿。
- 如果一个线程可以在一帧的刷新中执行完毕那么用户就不会感觉到卡顿的情况,反之在一帧的时间内无法重新绘制完毕的话用户就会有卡顿的感觉。所以react15之后将reconciliation的执行分成一个个fiber,fiber是一个执行单元
- 这些fiber会形成一个fiber树,fiber树是由一个链表组成的树结构,这个fiber树和ReactElement是一一对应的关系.
- 而通过这种方式是如何实现不卡顿呢,主要是利用浏览器的requestIdleCallback Api能够让浏览器在空闲时间执行这些fiber碎片,同时记录到操作位置,来让下一次空闲时间继续执行刚才未执行完之后。稍微提一下,requestIdleCallback这个Api是有一定的兼容性问题的,所以在一部分不支持的浏览器内react自己内部做了一个channal来判断浏览器是否有空闲时间,这个内部机制我后面再去学习一下。
请问react hooks内部是如何实现的:
为什么在逻辑判断里不能使用hooks