React 使用链表遍历组件树

Posted 2022-10-08 wust-hy

　　React 为控制UI的更新，提出了时间分片的概念，以达到三个目标：performing non-blocking rendering；applying updates based on the priority；pre-rendering content in the background.

　　React 遍历Dom Tree:

　　1. updates state and props

　　2. calls lifecycle hooks

　　3. retrieves the children from the component

　　4. compares them to the previous children 

　　5. figures out the dom updates the need to be performed

　　when dealing with UIs, the problem is that if too much work is executed all ai once ,it can cause animations to drap frames.

　　if react id going to walk the entire tree of components synchromously and perform work for each component ,it may run over 16ms available for an application code to execute its logic ,And this will cause frames to drop causing stuttering visual effects.

　　在理解react如何通过时间分片的来实现对用户而言的无阻塞渲染之前，需要了解两个浏览器的api：

　　requestIdleCallback会在某一帧结束后的空余时间或者用户处于不活跃的的状态时，处理我们的工作。利用这个API能使我们尽可能高效利用任何空闲的资源。

　　requestAnimationFrame 是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。设置这个API的目的是为了让各种网页动画（

Dom动画，Canvas动画，SVG动画，WebGL动画）能够有一个统一的刷新机制。显示器固有的刷新频率(60HZ/75HZ)，requestAnimationFrame的基本思想就是与这个刷新频率保持一致。

　requestIdleCallback((deadline)=>

　　　　   // 可用时间 & 是否有可用时间
　　　　　console.log(deadline.timeRemaining()，deadline.didTimeOut)　　

　　)　

      //timieRemaining can change as soon as browser gets some work to do，so it should be constanly checked。

　　要知道浏览器渲染一帧后的剩余时间，除了浏览器本身，利用js基本很难准确计算得到，因为当requestAnimationFrame的回调完成后，还要进行样式的计算，布局，渲染以及浏览器内部的工作等，还要确保当前没有用户交互。

　　当事件很多时，你可能会担心你的回调函数永远不会被执行。requestIdleCallback有一个可选的第二参数：含有timeout属性的对象。如果设置了这个timeout的值，回调函数还没有调用的话，则浏览器必须在设置的这个毫秒数后，去强制调用对应的回调函数。如果回调函数由timeout触发，timeRemaining()会返回0，deadtime对象的didTimeout属性值true。（设置timeout会破坏潜规则）

　　如果在某一帧的末尾，回调函数被触发，它将被安排在当前帧被Commit之后，这表示相应的样式已经改动，同时更重要的是布局已经重新计算。日过我们在这个回调中进行样式的改动，设计到布局的计算则会被判无效。如果在下一帧中有任何读取布局相关的操作，浏览器不得不执行一次强制同步布局，这将是一个潜在的性能瓶颈。此外不要在回调函数中触发dom改动的原因是DOM改动的时间是不可预期的，正因为如此，DOM操作很容易地超过浏览器给出的限期。

　　最佳实践是在requestAnimationFrame的回调中去进行dom改动，因为浏览器会优化同类型的改动。这意味可以在下一次的requestAnimationFrame回调中添加一个文档片段。如果用的是虚拟DOM的库，你可在requestIdleCallback中做改动，但要在下一次requestAnimationFrame中将这些改动应用到Dom上，而不是在背刺requestIdleCallback中。

　　re