React Reconciler

最新推荐文章于 2024-02-22 21:45:57 发布

カさま

最新推荐文章于 2024-02-22 21:45:57 发布

阅读量819

点赞数

CC 4.0 BY-SA版权

分类专栏： # React源码文章标签： react.js reconciler 前端 javascript

本文链接：https://blog.csdn.net/TM_Godspeed/article/details/122293952

React源码专栏收录该内容

5 篇文章

订阅专栏

React的Virtual DOM由React Element和Fiber组成。Fiber的引入使得DOM Diff算法在Fiber和WorkInProgress Fiber之间进行，实现了并行(Concurrent Mode)。Reconciler作为核心，负责元素层级关系、更新diff和渲染操作。它提供了插入、删除、修改元素以及替换元素的能力，且允许自定义Render。了解更多详情可参考官方文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React 的 Virtual DOM 是一个虚拟概念，下面两种类型都对应了 Virtual DOM

React Element
Fiber

在 Fiber 出现之前，DOM Diff 算法作用在 React Element 上

在 Fiber 出现后，DOM Diff 算法发生在 Fiber 和 WorkInProgress Fiber 之间，并计算更新
concurrent

提供并行( Concurrent Mode )的核心是 Fiber
提供渲染能力的是 Render (eg.ReactDOM.render)
提供 DOM Diff 的模块是 Reconciler

render = Reconciler(HostConfig)

// HostConfig 告诉 React 增加、修改节点的操作方法

调和器(Reconciler)将元素层级关系、更新 diff 和渲染操作整合在一起

Virtual DOM(在这里指 Fiber)：对组件层级结构的描述
Reconciliation：计算 DOM Diff
HostConfig：对于 React 渲染在具体端( DOM / React Native 等 )的封装
- 插入元素的能力
- 删除元素的能力
- 改变元素属性的能力
- 替换元素的能力

Reconciler 允许我们自定义 Render

const Reconsiler = require('react-reconciler');

const HostCOnfig = {
  // You'll need to implement some methods here.
  // See below for more information and examples.
};

const MyRender = Reconciler(HostConfig);

const RendererPublicAPI = {
  render(element, container, callback) {
    // Call MyRenderer.updateContainer() to schedule changes on the roots.
    // See ReactDOM, REact Native, or React ART for practical examples.
  }
}

module.exports = RendererPublicAPI;