React Fiber

Reference

Article

• Let's fall in love with React Fiber
• To Understand React Fiber, You Need to Know About Threads
• Understanding React's UI Rendering Process (understanding virtual dom in depth)
• An Introduction to React Fiber - The Algorithm Behind React
• React 開發者一定要知道的底層機制 — React Fiber Reconciler
• What’s New in React 16 and Fiber Explanation
• Inside Fiber: in-depth overview of the new reconciliation algorithm in React
• Uncovering Reactime: Understanding React Fiber, Redux Compatibility, and Zoning in on Components
• React Virtual DOM, Reconciliation and Fiber Reconciler
• What is React Fiber and How It Helps You Build a High-Performing React Applications
• Exploring React Fiber tree
• Inside Fiber: in-depth overview of the new reconciliation algorithm in React
• 这可能是最通俗的 React Fiber(时间分片) 打开方式
• 一篇长文帮你彻底搞懂React的调度机制原理
• 理解 React 的下一步：Concurrent Mode 與 Suspense
• A deep dive into React Fiber
• To Understand React Fiber, You Need to Know About Threads
• Introduction to React Fiber
• Understanding Of React Fiber Architecture
• React Fiber架构原理剖析
• Building an Async React Renderer with Diffing in Web Worker
• Smooth Operator: Concurrent Mode in React
• A look inside React Fiber
• 阿里三面：有React fiber，为什么不需要Vue fiber呢？
• React源码细读-UpdateQueue机制与Lane优先级模型
• 为什么Vue3不使用时间切片（Time Slicing）
• React源码解析之commitRoot整体流程概览

Lane

• React 为什么使用 Lane 技术方案
• React principle - lane priority and diff update

调度

• 一篇长文帮你彻底搞懂React的调度机制原理

• 扒一扒React计算状态的原理

• React中的优先级

Application

• 使用双缓存解决 Canvas clearRect 引起的闪屏问题
• 什么是canvas双缓冲，如何实现

Youtube

• Understanding React's UI Rendering Process

Github

• oslabs-beta/HiFiber
• acdlite/react-fiber-architecture - A description of React's new core algorithm, React Fiber
• 7kms/react-illustration-series - 图解react源码, 用大量配图的方式, 致力于将react原理表述清楚.
• ranbathanhtung/react-fiber-implement
• claudiopro/react-fiber-vs-stack-demo
• okmttdhr/my-own-react
• lukebelliveau/react-fiber-implementation-notes
• frejs/fre
• bendtherules/react-fiber-traverse