@ deckgl-fiber-resters/ reconcil
内部包裹. 大多数用户想要 @ deckgl-fiber-resters/dom (英语) 换句话说.
甲板.gl的回声调和器执行. 将JSX至deck.gl桥作为权力,但很少直接使用.
安装
pnpm add @deckgl-fiber-renderer/reconciler
自动安装为 @deckgl-fiber-renderer/dom。只有在构建自定义渲染器或贡献时直接安装.
建筑
什么是反应器?
React的调和器 diffs 元素树并决定什么变化 。 这个 react-reconciler 软件包允许您为非 DOM 目标构建自定义渲染器.
React JSX → Reconciler → Flattened layers/views → Deck instance
持久性模式
此调节器使用 持久性模式 (创建新对象)而不是 变异模式 (更新到位).
理由: deck.gl地层是不可改变的描述符,设计用于替换:
"Layers是描述对象,非常便宜,可以即时使用. 每个渲染周期都创造出一套新的地层 deck.gl 文档
dace.gl diffs 层内部通过匹配ID和比较道具. 调和器创建了新的图层实例;deck.gl的算法处理高效的更新.
树平
deck.gl 期望平面阵列,但反应树被嵌入. 调和器自动平分 :
输入( JSX ):
<Deckgl>
<view view={mainView}>
<layer layer={layer1} />
<layer layer={layer2} />
</view>
</Deckgl>
产出(平减):
{
layers: [layer1, layer2],
views: [mainView]
}
层可以任意地在React组件中筑巢. 调和者相继收取.
身份识别
deck.gl 以 ID 匹配层以高效更新 :
- 以 ID 匹配层
- 匹配ID的 Diff道具
- 仅更新已更改的道具
没有身份证 : deck.gl生成随机ID. 每个渲染物看起来像一个新的地层,引发了昂贵的再生.
这就是为什么调和器验证开发模式中的ID.
学习更多: https://deck.gl/docs/developer-guide/using-layers#layer-dentity-and-diffing 互联网档案馆的存檔,存档日期2013-12-22
参考文献
导出 API
createRoot(container)
为容器元素创建调和器根.
import { createRoot } from "@deckgl-fiber-renderer/reconciler";
const root = createRoot(canvasElement);
root.configure({ initialViewState: { ... } });
root.render(<layer layer={...} />);
参数:
container- DOM元素(canvas或div)可制成
回返情况: ReconcilerRoot
unmountAtNode(container)
解起并取清净调和之根.
import { unmountAtNode } from "@deckgl-fiber-renderer/reconciler";
unmountAtNode(canvasElement);
参数:
container- DOM 元素从
清理 : 卸载 React 树, 销毁 deck. gl 实例, 释放 GPU 资源, 删除 roots 登记.
roots
活性调和器根图.
import { roots } from "@deckgl-fiber-renderer/reconciler";
if (roots.has(canvasElement)) {
const existingRoot = roots.get(canvasElement);
// Work with existing root
}
类型 : Map<RootElement, ReconcilerRoot>
用法 : 确保根一能. 在创建新根之前选中 .
extend(objects) (折旧)
V1 语法的注册层/视图构建器.
import { extend } from "@deckgl-fiber-renderer/reconciler";
extend({ MyCustomLayer });
折旧: 将在v3中删除. 使用 <layer layer={new MyCustomLayer(...)} /> 而不是登记.
ReconcilerRoot
调和器根实例类型 .
type ReconcilerRoot = {
configure(props: DeckglProps): void;
render(element: ReactNode): void;
unmount(): void;
};
开发模式特征
验证系统
调和器验证开发模式中的分层( N)process.env.NODE_ENV === "development") (中文(简体) ). 检查被从生产建筑中剥离 通过去除死代码.
缺少 ID 警告
当一层缺乏清晰度时触发 id 道具 :
⚠️ Layer missing explicit "id" prop. This causes expensive reinitialization on every render.
检测 : 检查缺少或默认的ID( E)"unknown") (中文(简体) ).
修补 : 添加明确 id 到层构造器.
复制 ID 错误
当多层共享同一ID时触发 :
❌ Duplicate layer IDs detected: points, lines
检测 : 跟踪当前渲染中的所有层标识 .
影响 : 重复的ID打破了甲板. gl的分出. 一个层的道具可能适用于另一个层.
修补 : 确保每一层都有独有的 id。 。 。 .
生产行为
包含所有验证内容 if (process.env.NODE_ENV === 'development') 检查。 Bundlers在生产建筑中消除了这个代码. 零运行时间 生产间接费用.
相关软件包
- @ deckgl-fiber-resters/dom (英语) - 主要软件包用户安装
- @ deckgl-fiber-landers/ 类型 - 类型脚本定义