[JavaScript知识库]React Reconciler

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

• React Element
• Fiber

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

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

• 提供并行( 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;

更多资料请参考：https://github.com/facebook/react/tree/main/packages/react-reconciler