# @deckgl-fiber-renderer/reconciler 中文文档
规范地址：https://npmcn.com/package/%40deckgl-fiber-renderer/reconciler/
版本：2\.0\.1
npm 元数据更新时间：2026-05-26T13:56:00.430Z
中文译文更新时间：2026-11-11T19:19:58.852Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40deckgl-fiber-renderer/reconciler
原文对照：https://npmcn.com/package/%40deckgl-fiber-renderer/reconciler/?lang=original
项目主页：https://github.com/deckgl-fiber-renderer/fiber.gl#readme
源码仓库：https://github.com/deckgl-fiber-renderer/fiber.gl
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：284 kB，23 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：@deck\.gl/core \>=9\.1，@deck\.gl/geo-layers \>=9\.1，@deck\.gl/layers \>=9\.1，@deck\.gl/mapbox \>=9\.1，@deck\.gl/mesh-layers \>=9\.1，react ^19，react-dom ^19
- 首次发布：2025-03-14T04:20:14.533Z
- 最新版本发布：2026-05-26T13:56:00.275Z
- 近 30 天下载量：36006（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 2 个）
## 中文简介
> **内部包裹.** 大多数用户想要 [@ deckgl-fiber-resters/dom (英语)](https://npmcn.com/package/%40deckgl-fiber-renderer/dom) 换句话说.
## 安装
```sh
npm install @deckgl-fiber-renderer/reconciler
```
也可以使用：`pnpm add @deckgl-fiber-renderer/reconciler`、`yarn add @deckgl-fiber-renderer/reconciler`、`bun add @deckgl-fiber-renderer/reconciler`
## README
# @ deckgl-fiber-resters/ reconcil
> **内部包裹.** 大多数用户想要 [@ deckgl-fiber-resters/dom (英语)](https://npmcn.com/package/%40deckgl-fiber-renderer/dom) 换句话说.
甲板.gl的回声调和器执行. 将JSX至deck.gl桥作为权力,但很少直接使用.
## 安装
```bash
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 文档](https://deck.gl/docs/developer-guide/using-layers)
dace.gl diffs 层内部通过匹配ID和比较道具. 调和器创建了新的图层实例;deck.gl的算法处理高效的更新.
### 树平
deck.gl 期望平面阵列,但反应树被嵌入. 调和器自动平分 :
**输入( JSX ):**
```tsx
```
**产出(平减):**
```js
{
layers: [layer1, layer2],
views: [mainView]
}
```
层可以任意地在React组件中筑巢. 调和者相继收取.
### 身份识别
deck.gl 以 ID 匹配层以高效更新 :
1. 以 ID 匹配层
2. 匹配ID的 Diff道具
3. 仅更新已更改的道具
**没有身份证 :** deck.gl生成随机ID. 每个渲染物看起来像一个新的地层,引发了昂贵的再生.
这就是为什么调和器验证开发模式中的ID.
**学习更多:** [https://deck.gl/docs/developer-guide/using-layers#layer-dentity-and-diffing 互联网档案馆的存檔,存档日期2013-12-22](https://deck.gl/docs/developer-guide/using-layers#layer-identity-and-diffing)
* * *
## 参考文献
### 导出 API
#### `createRoot(container)`
为容器元素创建调和器根.
```tsx
import { createRoot } from "@deckgl-fiber-renderer/reconciler";
const root = createRoot(canvasElement);
root.configure({ initialViewState: { ... } });
root.render();
```
**参数:**
- `container` - DOM元素(canvas或div)可制成
**回返情况:** `ReconcilerRoot`
#### `unmountAtNode(container)`
解起并取清净调和之根.
```tsx
import { unmountAtNode } from "@deckgl-fiber-renderer/reconciler";
unmountAtNode(canvasElement);
```
**参数:**
- `container` - DOM 元素从
**清理 :** 卸载 React 树, 销毁 deck. gl 实例, 释放 GPU 资源, 删除 `roots` 登记.
#### `roots`
活性调和器根图.
```tsx
import { roots } from "@deckgl-fiber-renderer/reconciler";
if (roots.has(canvasElement)) {
const existingRoot = roots.get(canvasElement);
// Work with existing root
}
```
**类型 :** `Map`
**用法 :** 确保根一能. 在创建新根之前选中 .
#### `extend(objects)` (折旧)
V1 语法的注册层/视图构建器.
```tsx
import { extend } from "@deckgl-fiber-renderer/reconciler";
extend({ MyCustomLayer });
```
**折旧:** 将在v3中删除. 使用 `` 而不是登记.
#### `ReconcilerRoot`
调和器根实例类型 .
```tsx
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 (英语)](https://npmcn.com/package/%40deckgl-fiber-renderer/dom)** - 主要软件包用户安装
- **[@ deckgl-fiber-landers/ 类型](https://npmcn.com/package/%40deckgl-fiber-renderer/types)** - 类型脚本定义
## 进一步阅读
- [反应调试器](https://github.com/facebook/react/tree/main/packages/react-reconciler)
- [构建自定义渲染器](https://agent-hunt.medium.com/hello-world-custom-react-renderer-9a95b7cd04bc)
- [deck.gl 层寿命周期](https://deck.gl/docs/developer-guide/custom-layers/layer-lifecycle)
## 常见问题
### @deckgl-fiber-renderer/reconciler 是什么？
内部包裹\. 大多数用户想要 @ deckgl-fiber-resters/dom \(英语\) 换句话说\.
### 如何安装 @deckgl-fiber-renderer/reconciler？
在项目目录运行 npm install @deckgl-fiber-renderer/reconciler，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@deck\.gl/core（\>=9\.1）、@deck\.gl/geo-layers（\>=9\.1）、@deck\.gl/layers（\>=9\.1）、@deck\.gl/mapbox（\>=9\.1）、@deck\.gl/mesh-layers（\>=9\.1）、react（^19）、react-dom（^19）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @deckgl-fiber-renderer/reconciler 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @deckgl-fiber-renderer/reconciler 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @deckgl-fiber-renderer/reconciler 可以商用吗？
@deckgl-fiber-renderer/reconciler 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @deckgl-fiber-renderer/reconciler 的下载量有多少？
根据 npm 官方下载统计，@deckgl-fiber-renderer/reconciler 在 2026/10/12 – 2026/11/10 这 30 天内被下载 36,006 次，日均约 1,200 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @deckgl-fiber-renderer/reconciler 还在维护吗？
最新版本 2\.0\.1 发布于 2026/05/26（5 个月前）；至今共发布 8 个版本，其中过去 12 个月发布了 2 个；首次发布于 2025/03/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。