VictoryChart 36.x—37.x 演进全解：从默认轴注入到 React 18 时代的重大变更实录

• 数据可视化
• UI组件

packages/victory-chart/CHANGELOG.md记录了 Victory 图表编排组件 VictoryChart 从 36.5.3 到 37.3.6 的完整演进历史。本文以该变更日志为骨架，逐一解读每条变更背后的源码实现、测试验证与升级影响，帮助你在升级 Victory 版本时预判行为变化，并理解 VictoryChart 的默认轴注入、子组件克隆、事件协调等核心机制。

版本总览：变更日志记录的三个演进阶段

本仓库当前victory-chart版本为37.3.6（见 package.json），CHANGELOG 覆盖自 36.5.3 以来的全部记录，36.5.3 及更早的历史归档在根目录 CHANGELOG。从变更内容看，演进可以划分为三个阶段：

版本节奏本身也是重要信息：36.6.x 频繁的小版本 Patch 同步（每次都是一组Updated dependencies），体现 Victory 各包严格同步发版的工程策略——victory-chart与victory-axis、victory-core、victory-polar-axis、victory-shared-events四个依赖包保持版本号完全一致。

VictoryChart 是什么：先理解组件在源码中的真实结构

VictoryChart 是 Victory 的"编排型"容器组件。从 victory-chart.tsx 的源码可以看到，组件以React.memo包裹函数组件实现，运行时通过defaults({}, initialProps, defaultProps)合并默认 props：

const fallbackProps = { width: 450, height: 300, padding: 50, }; const defaultProps = { backgroundComponent: <Background />, containerComponent: <VictoryContainer />, defaultAxes: { independent: <VictoryAxis />, dependent: <VictoryAxis dependentAxis />, }, defaultPolarAxes: { independent: <VictoryPolarAxis />, dependent: <VictoryPolarAxis dependentAxis />, }, groupComponent: <g />, standalone: true, theme: VictoryTheme.grayscale, };

这段默认 props 是理解许多 CHANGELOG 条目的钥匙：

• 默认尺寸：未指定width/height/padding时，回退到 450×300、内边距 50；
• 默认双轴：非极坐标下自动注入<VictoryAxis />（独立轴）与<VictoryAxis dependentAxis />（依赖轴）；极坐标下则注入两个VictoryPolarAxis；
• 默认容器：standalone: true时外层是VictoryContainer，否则退化为<g>分组元素。

role = "chart"被赋给组件，供子组件与事件系统识别。官方文档对VictoryChart的定位是：它会克隆并重新渲染所有子组件，使所有子组件共享domain、scale、categories、padding等公共 props（见 victory-chart.mdx）。

默认轴注入机制：37.x 之前最核心的行为

CHANGELOG 中多次围绕"子组件/轴"出现修复，理解默认轴注入逻辑是解读这些条目的前提。该逻辑集中在 helper-methods.tsx 的getChildComponents：

export const getChildComponents = (props, defaultAxes?) => { let childComponents = React.Children.toArray(props.children); if (childComponents.length === 0) { childComponents.push(defaultAxes.independent, defaultAxes.dependent); } else { const axisComponents = { dependent: Axis.getAxisComponentsWithParent(childComponents, "dependent"), independent: Axis.getAxisComponentsWithParent(childComponents, "independent"), }; if ( axisComponents.dependent.length === 0 && axisComponents.independent.length === 0 ) { childComponents = props.prependDefaultAxes ? [defaultAxes.independent, defaultAxes.dependent].concat(childComponents) : childComponents.concat([defaultAxes.independent, defaultAxes.dependent]); } } return childComponents; };

规则可以归纳为三条：

1. 没有子组件→ 追加一对默认轴；
2. 子组件中没有任何轴组件→ 默认轴被加入（prependDefaultAxes为 true 时放在最前，否则追加到末尾），对应官方文档中prependDefaultAxes默认值为 true 的说明（victory-chart.mdx）；
3. 子组件中已有任一轴→ 不再注入默认轴。

这些规则被 helper-methods.test.tsx 的三个用例逐条锁定：空 children 返回一对默认轴、只有数据组件时补齐默认轴、已有轴组件时保持子组件原样。同时 victory-chart.test.tsx 验证了"默认渲染两个轴""只给一个轴就只渲染一个轴"的行为。

轴与数据子组件在渲染阶段会被进一步"注入"公共 props——getChildren中为每个子组件克隆并合并horizontal、height、polar、theme、width、style、name、origin、padding、key、standalone: false等属性（helper-methods.tsx）。这是 CHANGELOG 36.6.1 之前"子组件 props 可能被 undefined 覆盖默认值"问题发生的位置，也是 37.0.2 修复"undefined props 覆盖默认值"的上下文所在。

37.0.2：undefinedprops 不再覆盖子组件默认值

Patch Changes：Ensure undefined props do not overwrite defaults（#2852）

这条修复的核心场景是：用户显式传入<VictoryChart foo={undefined}>时，defaults()（lodash 的_.defaults）只会在属性值为undefined时才应用默认值，但此前若子组件 props 合并路径上出现了显式undefined，可能穿透默认值、最终导致轴或数据组件的默认配置被意外清空。

修复思路体现在当前 victory-chart.tsx 的写法中——先用React.useMemo缓存defaults({}, initialProps, defaultProps)的结果，随后在子组件克隆阶段（helper-methods.tsx）统一以defaults({...}, childProps)的方式合并，保证默认值始终兜底。

升级影响：如果你在 37.0.2 之前依赖"传 undefined 会清空某个样式/配置"这一行为，升级后该行为不再成立；反之，如果你的代码里存在条件渲染 props（如style={cond ? {…} : undefined}），升级后默认样式将正确保留，这正是修复想要的效果。

37.0.0：Babel 现代化与浏览器目标升级

Major Changes：Upgrade babel dependencies and build target to modern browsers（#2804）

这是 37.x 的唯一 Major 变更，含义是：构建产物不再为旧浏览器转译，转而面向 modern browsers 输出。结合 package.json 的构建脚本可以看到，包同时产出三种格式：

• main: lib/index.js（CJS，build:lib:cjs）；
• module/jsnext:main: es/index.js（ESM，build:lib:esm）；
• dist/victory*.js与dist/victory*.min.js（UMD，build:dist:dev/build:dist:min）。

升级影响：如果你的应用需要支持 IE11 等旧浏览器，37.x 产物的语法可能超出你的转译链范围，需要确保自己的 Babel 配置覆盖victory-chart及整个victory-*家族。engines字段要求 Node >= 18.0.0。

36.8.x：代码现代化三连

36.8.x 三个 Patch 版本是典型的"零行为变化"代码卫生重构，但理解了它们有助于你阅读源码：

• 36.8.2：Assign merged props to a const instead of modifying initialProps（#2718）。此前合并后的 props 直接写回initialProps，重构后改为赋值给新的 const，避免可变地污染传入对象；
• 36.8.3：Refactor param reassignments（#2724）。消除函数参数重赋值，让代码更符合函数式风格，便于引擎优化；
• 36.8.5：Replace instances of lodash.assign with Object.assign（#2757）。逐步削减 lodash 依赖，这部分削减在 37.3.3 移除 babel-plugin-lodash 后基本完成。

升级影响：这三个版本 API 完全兼容，可以放心升级。

36.8.0：v37 实验代码移除与 defaultProps 清理

Minor Changes：Remove v37 experimental code（#2697） Patch Changes：Remove usage of defaultProps from components（#2679）

两条变更互相关联。36.8.0 移除了为 v37 预留的实验代码，同时把组件内部的defaultProps静态属性写法移除。结合当前源码，默认 props 已改为函数体内对象字面量（defaultProps常量 +defaults()合并），这是为了规避 React 对defaultProps的弃用警告，并让默认值在 Hooks 体系中更可控。

Patch Changes：Fixed issue where VictoryChart would throw an unhandled exception when passed non-element children（fixes #2391）

同一个版本还修复了一个真实缺陷：当VictoryChart收到非元素子节点（如字符串、数字、布尔值）时会抛出未捕获异常。修复后的防御体现在 helper-methods.tsx 的children.filter(React.isValidElement)——在渲染前过滤掉所有非合法元素。这是撰写文章或工具代码时值得记住的行为：VictoryChart的子节点现在对非元素是宽容的。

36.7.0 – 37.1.x：版本号工程化

这一区间虽然多数版本没有 changelog 正文，但依赖版本条目揭示了 Victory 的工程策略：

• 36.6.6 至 36.6.8：连续三版Updated dependencies []，victory-chart与victory-axis、victory-core、victory-polar-axis、victory-shared-events同步发版；
• 37.1.0：Pin all internal victory package versions（#2876）。内部包版本从范围依赖改为精确固定——这正是 package.json 中"victory-axis": "37.3.6"这种精确写法的由来，防止子包版本漂移；
• 37.1.2：Fix victory-native container styles。在 demo/rn 的 React Native 示例目录中也使用了 Victory，这条修复保证原生端容器样式不被覆盖。

36.6.4：data accessor 接受任意数据类型

Allow data accessors to accept any data types（fixes #2360）

此前 Victory 的 data accessor（x/y取值函数，支持字符串 key、数字索引或函数）对数据类型有隐式假设，遇到非标准数据（如嵌套对象、Date、Map 等）会失效。36.6.4 将 accessor 泛化，使其接受任意数据类型。这条变更在仓库的 data accessors 故事中也有体现——stories/victory-charts/victory-area/data-accessors.stories.tsx 展示了用函数从复杂数据对象中提取 x/y 的写法。

升级影响：如果你的数据源包含日期对象、嵌套结构等非常规字段，36.6.4 之后的VictoryChart与子组件组合可以更可靠地完成取值。

36.9.0 与 36.9.2：prop-types 移除

Remove prop-types definitions and dependency（#2758）

36.9.0 移除了组件内的 prop-types 定义与依赖。当前VictoryChart的 props 完全由 TypeScript 类型定义（VictoryChartProps接口，见 victory-chart.tsx）承载，这也解释了为何仓库为每个包配置了types:create与types:check的 wireit 构建任务。使用 TypeScript 的项目在 36.9.0+ 会获得更完整的类型提示；纯 JS 项目的运行时 prop 校验则不再提供，建议配合 TypeScript 或 IDE 类型检查使用。

36.6.3：不再生成 sourcemap

Do not generate *.js.map sourcemaps（fixes #2346）

36.6.3 起发布产物不再包含.js.map文件。影响面很小：仅影响你直接调试 node_modules 中源码映射的场景。仓库构建配置中，package.json 的 wireitoutput仍列出es/**/*.js.map（构建产物输出定义），但发布行为以 changelog 为准，即不随包分发 sourcemap。

36.6.5 – 36.6.8：依赖同步发版与数据访问器修复的分界

36.6.5 至 36.6.8 区间内，victory-chart自身的 Patch 内容主要跟随上游victory-core修复（如Allow data accessors...通过victory-core传递）。这印证了 Victory 的架构分层：数据取值、scale、domain 计算都在victory-core，victory-chart只负责编排。所以阅读victory-chart的 changelog 时，若某条依赖更新没有[]内说明，实际行为变化需要到victory-core的对应版本中查找。

37.3.x：构建链瘦身与类型改进

37.3 系列是当前版本区间（37.3.6）的最后冲刺：

• 37.3.3：Remove deprecated babel-plugin-lodash plugin（#2965）；
• 37.3.3：Improve types in victory-core helpers（#2999）。提升victory-core工具函数的类型质量，间接改善VictoryChart的类型推导；
• 37.3.4 – 37.3.6：无 changelog 正文，属于依赖同步或内部微调版本。

升级路径总结与兼容性清单

根据 CHANGELOG 与源码，给出可操作的升级检查表：

从哪里继续深入

如果你想在源码层面验证本文结论，建议按以下路径阅读：

• victory-chart.tsx：组件主实现，默认 props、子组件克隆、事件协调（VictorySharedEvents）入口；
• helper-methods.tsx：默认轴注入、domain/scale/range 计算、子组件 props 注入；
• victory-chart.test.tsx 与 helper-methods.test.tsx：行为锁定测试；
• victory-chart.mdx：官方 API 文档，含backgroundComponent、domain、endAngle/startAngle、events、innerRadius、style等 props 的完整说明与 live 示例；
• axis.mdx：VictoryAxis/VictoryPolarAxis组合实战；
• stories/victory-charts/victory-chart/default.stories.tsx：Storybook 默认渲染示例。

附：本仓库其他包的 CHANGELOG 阅读提示

本仓库的每个victory-*包都维护独立的 CHANGELOG.md。阅读建议：优先看每个包的 Major 与 Minor 条目（如victory-chart的 37.0.0、36.8.0、36.9.0），Patch 条目多为依赖同步；若某条 Patch 引用了 issue 号，值得点进 PR 查看具体修复，因为那通常是真实用户在业务中踩过的坑。36.5.3 及更早的历史请参阅仓库根目录的根 CHANGELOG（见 CHANGELOG 文末说明）。

• 数据可视化
• UI组件