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

React Reconciler相关推荐

前端vue适配不同的分辨率_浅析 React / Vue 跨端渲染原理与实现
当下的前端同学对 React 与 Vue 的组件化开发想必不会陌生,RN 与 Weex 的跨界也常为我们所津津乐道.UI 框架在实现这样的跨端渲染时需要做哪些工作,其技术方案能否借鉴乃至应用到我们自己 ...
前端架构设计第六课工程化构建、编译、运行
12 如何理解 AST 实现和编译原理? 经常留意前端开发技术的同学一定对 AST 技术不陌生.AST 技术是现代化前端基建和工程化建设的基石:Babel.Webpack.ESLint.代码压缩工具等 ...
前端开发：如何正确地跨端？
简介: 面对多种多样的跨端诉求,有哪些跨端方案?跨端的本质是什么?作为业务技术开发者,应该怎么做?本文分享阿里巴巴ICBU技术部在跨端开发上的一些思考,介绍了当前主流的跨端方案,以及跨端开发的经验心得 ...
Taro3跨端跨框架原理初探
背景在项目中,我们用到了Taro3进行跨端开发,在这里分享下Taro3的一些跨端跨框架原理,也是希望能帮助自己更好的去理解Taro背后的事情,也能加速定位问题.此文章也是起到一个抛砖引玉的效果,让自 ...
taro更新页面数据_Reconciler
Taro 的运行时包括 DOM.BOM.React 兼容层.Vue 兼容层等内容,而不同的端平台或开发框架都有可能需要对 Taro 运行时进行侵入定制. 为了解耦,我们参考了 React Reconc ...
react源码解析之stack reconciler
关于源码解读的系列文章,可以关注我的github的这个仓库, 现在才刚刚写,后续有空就写点.争取把react源码剖析透学习透.有不正确的地方希望大家帮忙指正.大家互相学习,共同进步. 本篇文章是官方文 ...
React 调和（Reconciler）原理理解
文章目录 Fiber Fiber 更新机制双缓冲树 render阶段 commit 阶段总结 Fiber Reactv15及之前,React 对于虚拟 DOM 是采用递归方式遍历更新的,一次更 ...
React 中的“栈调和”（Stack Reconciler）过程是怎样的？
React 中的"栈调和"(Stack Reconciler)过程是怎样的? 如果我们不清楚 React 15 的运作机制,就无从把握它的局限性:如果我们不能确切地把握 Rea ...
Understanding The React Source Code
Understanding The React Source Code - Initial Rendering (Simple Component) I UI updating, in its ess ...

React Reconciler

React Reconciler相关推荐

最新文章

热门文章