前端的React框架中，在很早就引入了Fiber的概念，但是很多小伙伴搞不清楚到底是什么，怎样实现的性能优化。这篇文章会给你答案。
先来点官方回答：
React Fiber是React 16中引入的新协调算法（reconciliation algorithm）的核心。它是一个从头设计的React内部机制，旨在提高性能，特别是对于复杂的用户界面来说。Fiber的主要目标是实现可中断的渲染过程，这样React就可以在渲染大型或复杂的应用程序时，优先处理更紧急的任务。
React Fiber的工作原理
- Fiber节点：- 每个React组件实例在内部都被表示为一个Fiber节点。每个Fiber节点不仅包含了与该组件相关的所有信息（例如状态、属性等），还包括了指向其父节点、子节点以及兄弟节点的指针。这使得React可以构建出一棵由Fiber节点组成的树状结构，也就是Fiber树。
- 工作循环：- React Fiber采用了一个基于“工作循环”（work loop）的概念来处理更新。这个循环是在浏览器空闲时间执行的，这意味着React会尝试在每一帧的剩余时间内完成尽可能多的工作，而不会阻塞主线程，从而保证了良好的用户体验。- 当有新的更新需要处理时，React会启动一个工作循环，在这个循环中，它会遍历Fiber树，计算出哪些部分需要更新，并将这些更新应用到DOM上。
- 优先级调度：- 不同的更新可能有不同的优先级。例如，用户输入通常比后台数据加载更重要。React Fiber能够根据更新的紧急程度来调整任务的执行顺序，确保高优先级的任务得到优先处理。- 这种机制允许React在必要时暂停低优先级的任务，以便先处理更重要的任务，然后再回到之前未完成的工作。
- 增量渲染：- 通过上述机制，React Fiber实现了所谓的“增量渲染”。这意味着React可以分批处理渲染任务，而不是一次性完成所有工作。这在处理大量数据或复杂UI时尤其有用，因为它可以避免长时间阻塞用户界面。
- 副作用：- 在React Fiber中，“副作用”指的是那些需要在渲染之后执行的操作，比如实际地向DOM添加、删除或修改元素。React将这些操作收集起来，直到整个渲染过程结束时再统一执行，这样可以减少对DOM的操作次数，进一步提升性能。
总之，React Fiber通过一系列优化技术，如可中断的工作循环、优先级调度和增量渲染等，极大地提高了React应用的响应性和性能，特别是在处理大规模动态数据和复杂交互场景时表现尤为突出。
我的想法（土话总结）：
性能优化是什么？为什么要性能优化？前端的性能优化展现在哪里？
这三个问题的答案其实很简单，前端的优化就是让用户用起来不卡就行了。
为什么会卡？
大家知道显示器每秒钟渲染60帧画面，也就是每1000ms绘画出60张图片，来保证用户的体验。卡？那就是每秒钟画不够了呗。16.67ms一张的需求，满足不了。
为什么之前的React满足不了？
因为旧的虚拟dom树，在数据发生变化之后，生成新的虚拟dom，新旧虚拟dom树进行diff算法对比，然后更改真实dom。问题就出在这，如果dom树很大，计算量很大，那么就会卡在计算的过程中，React框架不能在16.67ms以内告诉浏览器下一帧究竟长什么样子。然后就会导致掉帧，也就是所谓的卡。（浅显易懂）
知道了原因，那怎么解决呢？
Fiber就是把整个diff算法的计算过程放到了每一帧里面。
比如：浏览器画一帧的时间需要10ms,那么在这一帧开始的6ms后，就会中止diff算法的运算，先交给渲染主线程，先画一帧画面，保证每秒中有60帧的输出。
就这么简单，当然我说的是简单的实现思路，具体运用到的api也有很多，还有通信的问题。
具体可以深入看B站视频：手撕React Fiber 源码_哔哩哔哩_bilibili
明白了实现思路，看起来就不会很难受了
版权归原作者 Knight_Giao 所有， 如有侵权，请联系我们删除。