新闻详情

新闻详情

首页 / 资讯中心 / 详情

dash-html-components 演进全解:从 0.1.0 到 1.1.4 的变更历史、核心属性机制与源码印证

发布时间:2026/10/1 8:22:46来源:尧图网络
dash-html-components 演进全解:从 0.1.0 到 1.1.4 的变更历史、核心属性机制与源码印证
前端后端数据可视化【免费下载链接】dashData Apps Dashboards for Python. No JavaScript Required.项目地址https://gitcode.com/gh_mirrors/da/dash点击查看免费下载导读本文以 components/dash-html-components/CHANGELOG.md 为骨架完整梳理 dash-html-componentsDash 官方原生 HTML 组件库从 2016 年 0.1.0 首发到 2021 年 1.1.4 的每一次重要变更并对照仓库内 组件生成器、元素清单、集成测试 等源码逐一解释n_clicks点击回调、aria-*/data-*通配属性、布尔/数值属性校验、data-dash-is-loading加载状态等核心机制的真实实现。读完本文你将掌握 dash-html-components 的能力边界、属性体系的演化逻辑以及如何在 Dash 应用中正确使用这些内建属性并理解 2.0 版本之后该组件库为何并入主 Dash 仓库统一维护。dash-html-components 是什么一份变更日志背后的项目定位dash-html-components 是 Dash 生态中提供原生 HTML 元素包装组件的官方库。它不做任何 JavaScript 开发即可用 Python 写出完整的 HTML 结构——html.Div、html.Button、html.Img、html.Table等约 125 个元素详见 scripts/data/elements.txt均是对标准 HTML5 标签的 React 包装。CHANGELOG.md 开头有一段重要说明自 v2.0 起dash-html-components 的所有变更统一记录在主 Dash 的变更日志中本文件仅保留用于历史追溯并声明该项目遵循 Semantic Versioning。因此这份文档本质上是一份组件库核心能力与工程实践的演化史从版本号规律可以清晰看出项目的成熟路径0.x 阶段2016–2019能力快速扩张点击计数、通配属性、加载状态、Python 类文件生成等核心机制在此阶段定型1.x 阶段2019–2021以修复、兼容性、多语言生态R、Julia支持为主能力趋于稳定2.x 之后并入主 Dash 仓库统一维护当前仓库中该目录即位于components/dash-html-components/下由 monorepo 统一管理。早期奠基0.1.0–0.8.0组件生成机制与点击计数诞生0.1.02016-06-28初始发布dash-html-components 的首次发布标志着用 Python 写 HTML成为可能。从仓库的 README.md 可以确认其定位与生成方式组件不是手写的而是从scripts/目录下的元素定义程序化生成到src/components并通过npm run generate-components重新生成属性清单则是通过抓取 MDN HTML 属性参考获得。0.2.x2016-07属性大小写与 style 类型修正0.2.0修复属性大小写问题。HTML 属性名与 React prop 名的映射在这一阶段被规范化如class→className、for→htmlFor。0.2.2修复 PyPI 包中的组件元数据路径问题保证 Python 侧能正确加载生成信息。0.2.3style的 propType 从string修正为object。这一修正直接影响用户写法——style{color: red}这样的 Python 字典最终会被序列化为 React style 对象。0.7.02017-07-18n_clicks属性加入所有组件这是 dash-html-components 历史上最重要的一次能力扩展每个组件都新增n_clicks属性元素被点击时自动递增。从 generate-components.js 的模板源码可以看到其真实实现const Component ({n_clicks 0, n_clicks_timestamp -1, ...props}) { const extraProps {}; const ctx window.dash_component_api.useDashContext(); const loading ctx.useLoading(); if (loading) { extraProps[data-dash-is-loading] true; } const isStatic props.disable_n_clicks || !props.id; return ( element {...(!isStatic {onClick: () props.setProps({ n_clicks: n_clicks 1, n_clicks_timestamp: Date.now() })} )} {...omit([n_clicks, n_clicks_timestamp, loading_state, setProps, disable_n_clicks], props)} {...extraProps} {props.children} /element ); };几个关键工程细节值得注意默认值约定n_clicks默认0n_clicks_timestamp默认-1表示从未点击过事件监听按需挂载isStatic props.disable_n_clicks || !props.id——当组件没有id或显式设置disable_n_clicks时不挂载 onClick 监听器。这既避免了为静态内容浪费事件监听也保证了无障碍screen reader 兼容因为点击事件只对回调有意义的场景才有价值回调机制点击后通过setProps同时更新n_clicks与n_clicks_timestampDash 前端据此触发对应的 Python 回调。0.8.02017-09-29key属性加入所有组件key是 React 渲染列表时用于性能优化的唯一标识用于元素复用与重排识别。dash-html-components 将 React 的key透传为每个组件的通用属性在 generate-components.js 中有对应的 propType 声明。用户渲染动态列表时可以给同结构元素传入稳定key以避免不必要的重渲染。属性体系扩展0.9.0–0.11.0prop-types 解耦、通配属性与时间戳0.9.02018-02-11PropTypes 从 react 迁移到独立的 prop-types 包为了让 dash-renderer 能平滑升级到 React 16组件库把 PropTypes 的 import 来源从react改为独立的prop-types包。这在当前 package.json 中仍可看到痕迹dependencies明确包含prop-types: ^15.8.1。同版本还新增了Picture和Base组件以及Audio组件的muted属性。0.10.02018-04-03dash.py命名冲突防御若用户把自己的应用文件命名为dash.pyPython 的模块导入机制会让import dash_html_components解析到用户的本地文件而不是真正的 Dash 包从而产生难以排查的错误。该版本在导入时显式检查并给出友好警告。当前 dash_html_components_base/init.py 仍保留着这套防护逻辑if not hasattr(_dash, __plotly_dash) and not hasattr(_dash, development): print( Dash was not successfully imported. Make sure you dont have a file named \ndash.py in your current directory., file_sys.stderr, ) _sys.exit(1)0.10.12018-04-29aria-*与data-*通配属性全面支持这是可访问性与数据绑定能力的里程碑所有组件开始支持任意aria-*与data-*属性用法是 Python 字典展开html.Div(idmy-div, **{data-toggle: toggled, aria-toggled: true})在 generate-components.js 中这两个通配符被声明为data-*: PropTypes.string与aria-*: PropTypes.string。data-*常用于在 DOM 上附加业务数据供客户端回调或测试定位读取aria-*用于无障碍标注如aria-label、aria-expanded。同一版本还统一加入了role属性并给textarea增加了autoComplete属性。0.11.02018-06-01n_clicks_timestamp补全多元素点击判定n_clicks只能告诉你被点击了几次却无法回答多个按钮中哪个最后被点击。0.11.0 因此给所有组件新增n_clicks_timestamp——元素被点击时的时间戳自 1970 年起的毫秒数用于在回调中判断哪个元素最近被点击。这一设计的实际效果被 test_integration.py 中的test_click_prev完整验证两个按钮分别带n_clicks0, n_clicks_timestamp-1初始化依次点击后回调收到的n_clicks_timestamp会随之更新且互不影响据此可以精确判定最近点击的元素。CHANGELOG 原文也坦承这是一个过渡方案——理想情况是所有属性都能自带变更时间信息而不仅是n_clicks。工程化与多语言生态0.12.0–0.13.50.12.02018-06-01从运行时生成类到预生成 Python 类文件早期版本中dash_html_components/__init__.py是在运行时动态生成组件类的0.12.0 改为直接导入预生成的 Python 类文件。这一看似平凡的重构带来了 IDE 自动补全、静态类型检查等现代开发体验因为类定义现在真实存在于磁盘上而非在内存中拼接。当前仓库的 package.json 中build:backends脚本证实了这条流水线dash-generate-components ./src/components dash_html_components -p package-info.json即从src/components下的 React 组件元数据用 Dash 官方生成器产出 Python 后端类文件。0.13.0–0.13.42018-09 至 2018-12构建产物与兼容性修正0.13.0新增非压缩 dev bundle方便开发阶段断点调试0.13.1将__init__.py中的external_path重命名为dash_html_components.min.js统一 CDN 与本地产物的命名约定0.13.2修复 Python 3.7 兼容性——早期生成的类中包含async关键字在 Python 3.7 中async已是保留字故在 3.7 环境下重新生成类以移除该关键字0.13.3将n_clicks/n_clicks_timestamp的 PropType 从非法的integer修正为number并在包装元素时正确省略这两个属性避免它们被透传到真实 DOM0.13.4修复因 Dash 版本不对导致的构建失败。0.13.52019-01-11清理点击事件与 R 生态整合该版本完成了两件大事正式移除 click 事件——早在 0.7.0 引入n_clicks时旧的 click 事件就已废弃此时彻底删除统一到n_clicks体系合并dashHtmlComponentsR 包——将 R 语言支持并入主构建并更新setup.py补充仓库 URL 与长描述、收紧 npmignore。属性校验与加载状态0.14.0–0.16.00.14.02019-03-04data-dash-is-loading加载状态属性所有组件新增data-dash-is-loading属性承载新的loading_state.is_loadingprop。当组件关联的回调处于执行中Dash 渲染器会在该 DOM 节点上打上此标记前端即可基于属性选择器如 CSS[data-dash-is-loadingtrue]实现加载动效。其实现即在 generate-components.js通过window.dash_component_api.useDashContext()获取加载上下文loading为真时向extraProps写入data-dash-is-loading: true。0.15.02019-03-25移除未定义的setProps处理清理了setProps的未定义分支逻辑简化组件包装代码避免空回调带来的隐性错误。0.16.02019-04-25属性校验体系全面强化这是为 Dash Dev Tools 属性校验功能做准备的一次集中改进直接定义了本库的属性类型策略布尔属性如hidden接受布尔值或与属性名相同的不区分大小写的字符串hidden/HIDDEN数值属性如rows、max、min接受数字或数字字符串新增formNoValidate与inputMode属性。这些规则在 generate-components.js 中有精确实现源码内维护了BOOLEAN_PROPERTIES与NUMERIC_PROPERTIES两张清单布尔属性生成oneOfType([PropTypes.oneOf([...大小写变体]), PropTypes.bool])数值属性生成oneOfType([PropTypes.string, PropTypes.number])。这也解释了为什么html.Div(hiddenhidden)和html.Div(hiddenTrue)都能通过校验——它们最终都会由 React 转换为 DOM 上的布尔属性语义。1.x 稳定期2019–2021表单能力、跨语言支持与安全修复1.0.02019-06-20表单属性补齐与版本管理统一新增Button的formEncType、formMethod、formTarget属性以及Select的autoComplete属性——补齐了 Dash 表单提交场景的能力缺口移除version.py版本号统一改由主命名空间的__version__提供当前 dash_html_components_base/init.py 即通过读取package-info.json注入__version__。1.0.1–1.0.32019-08 至 2020-04文档、兼容性与生成产物刷新1.0.1更新生成的文档与组件元数据保持同步1.0.2修复 IE11 兼容性同时保证 ES5 语法兼容与校验——这在 package.json 中体现为postbuild脚本es-check es5 dash_html_components/*.js1.0.3更新生成的 props 与 R 语言产物。1.1.0–1.1.12020-08/09Dash.jl Julia 支持连续两个版本支持 Dash.jlJulia 语言的组件生成标志着 dash-html-components 从 Python R 扩展为覆盖 Python、R、Julia 三大生态的通用 HTML 组件库。当前 package.json 的build:backends脚本同样可以看到多后端生成的痕迹dash-generate-components ./src/components dash_html_components -p package-info.json --r-prefix html --r-suggests dash,dashCoreComponents --jl-prefix html1.1.22021-01-19修复 Dash 导入 Bug修复了 Dash 主包导入过程中由组件库引发的问题属于依赖链稳定性修正。1.1.32021-04-08Iframe/object 安全与废弃元素标注html.Iframe新增allow与referrerPolicy属性。allow用于声明 iframe 可用的权限如fullscreenreferrerPolicy控制 referrer 传递策略——test_integration.py 中专门断言了这两个属性在 DOM 上的最终渲染结果修复object的data属性问题为 obsolete、deprecated、discouraged 元素补充文档注释。在 generate-components.js 中可以看到这些注释的完整实现basefont、blink、command、element、isindex、listing、multicol、nextid、plaintext、spacer等标记为OBSOLETEkeygen、marquee、shadow标记为DEPRECATEDmeta、output、script、title则给出CAUTION提示例如script明确提示不要试图通过script元素执行 JS请改用客户端回调。对应测试 test_dash_html_components.py 会断言这些关键词出现在html.Script、html.Blink、html.Marquee的文档字符串中。值得注意的是同一份生成器源码中还内建了针对链接类组件的XSS 防护generate-components.jsahref、formaction、iframe/embedsrc、objectdata、buttonformAction等属性会经window.dash_clientside.clean_url清洗检测到危险链接时通过setProps抛出Dangerous link detected错误。这与 1.1.3 修复object.data一脉相承共同构成了 dash-html-components 的安全防线。1.1.42021-07-09依赖与构建更新、R vignettes 刷新更新依赖与构建流程更新 R 包 vignettes 与dash-info.yaml使示例不再依附已废弃的旧组件包名dashHtmlComponents、dashCoreComponents、dashTable。v2.0 之后并入主 Dash 仓库的维护模式CHANGELOG 顶部明确声明v2.0 起所有变更转入主 Dash 的变更日志。这一演进与当前仓库布局完全一致——dash-html-components 作为 monorepo 的一部分位于 components/dash-html-components/与 dash-core-components、dash-table 并列管理构建、测试、发布统一纳入 Dash 主仓流程。附dash-html-components 版本演进时间线版本日期核心变更源码/测试印证0.1.02016-06-28初始发布README.md0.2.02016-07-07修复属性大小写—0.2.32016-07-20stylepropType 改为 objectgenerate-components.js0.7.02017-07-18所有组件新增n_clicksgenerate-components.js0.8.02017-09-29所有组件新增keygenerate-components.js0.9.02018-02-11PropTypes 迁移至独立包新增 Picture/Base/mutedpackage.json0.10.02018-04-03dash.py命名冲突告警dash_html_components_base/init.py0.10.12018-04-29支持aria-*/data-*、roletextareaautoCompletegenerate-components.js0.11.02018-06-01所有组件新增n_clicks_timestamptest_integration.py0.12.02018-06-01Python 类文件预生成支持 IDE 补全package.json0.13.02018-09-20非压缩 dev bundle—0.13.12018-09-20外部产物统一为 dash_html_components.min.jsdash_html_components_base/init.py0.13.22018-09-21Python 3.7 兼容移除 async 关键字—0.13.32018-12-17n_clicks系 PropType 改为 numbergenerate-components.js0.13.52019-01-11移除 click 事件合并 R 包—0.14.02019-03-04所有组件新增data-dash-is-loadinggenerate-components.js0.15.02019-03-25移除未定义setProps处理—0.16.02019-04-25布尔/数值属性校验体系formNoValidate、inputModegenerate-components.js1.0.02019-06-20Button 表单属性、Select autoComplete移除 version.py—1.0.22019-11-14IE11/ES5 兼容package.json1.1.0/1.1.12020-08/09Dash.jl Julia 生成支持package.json1.1.32021-04-08Iframeallow/referrerPolicyobjectdata修复废弃元素注释test_integration.py、generate-components.js1.1.42021-07-09依赖与构建更新R vignettes 刷新—对开发者的实际启示回看这份变更日志几条经验对 Dash 应用开发有直接价值点击交互统一走n_clicks体系多元素场景务必同时读取n_clicks_timestamp判定哪个元素最近被点并配合prevent_initial_callTrue与合理的默认值n_clicks0、n_clicks_timestamp-1初始化测试范式可参考 test_integration.py静态内容记得省事件没有id的组件不会挂载点击监听器disable_n_clicksTrue可显式关闭监听既提升性能也利于无障碍属性类型边界清晰布尔属性大小写不敏感、数值属性可传字符串数字了解 generate-components.js 中的两套清单即可避开无谓的校验报错无障碍与扩展数据靠通配属性aria-*与data-*是 Dash 应用承载辅助信息的标准通道慎用废弃元素html.Blink、html.Marquee、html.Basefont等虽仍可导入保证完整性但其文档字符串中带有 OBSOLETE/DEPRECATED 标注且script、meta、title等元素在 Dash 动态渲染语境下有明确的行为限制不应作为常规布局手段。赞分享前端后端数据可视化【免费下载链接】dashData Apps Dashboards for Python. No JavaScript Required.项目地址https://gitcode.com/gh_mirrors/da/dash点击查看免费下载相关推荐azcontainerregistry Go SDK 版本演进全解析从 0.1.0 到 0.2.3 的功能、破坏性变更与源码印证azcontainerregistry Go SDK 版本演进全解析从 0.1.0 到 0.2.3 的功能、破坏性变更与源码印证 本文以 Azure Cont云原生CI/CDDevOps后端Rye 版本演进全解析从 0.1.0 到 0.44.0 的变更历史与技术脉络Rye 版本演进全解析从 0.1.0 到 0.44.0 的变更历史与技术脉络 本篇文章以 Rye 官方变更记录为主体完整梳理该项目从 2023 年 5 月首开发工具CLISelectize.js 版本演进全解析从 v0.12 到 v0.15 的核心特性、破坏性变更与源码印证Selectize.js 版本演进全解析从 v0.12 到 v0.15 的核心特性、破坏性变更与源码印证 本篇文章以 Selectize.js 官方 CHANUI组件前端上一篇System Design Interview完全指南10个步骤快速掌握系统设计面试黄金法则下一篇Transformer训练教程从零开始构建高性能翻译模型 创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

用Squaretest自动生成Mockito单元测试,告别手工Mock烦恼 2026/10/1 9:18:46

用Squaretest自动生成Mockito单元测试,告别手工Mock烦恼

做后端Java开发这么多年,我一直对一件事耿耿于怀——写单元测试的时间,往往比写业务代码还要长。尤其是Mock那一套:每加一个依赖,就要手动补一个Mock,每次改构造函数,又得跟着调InjectMocks,方法…

阅读更多 →
WorkBuddy 论文证据链:国产之光不是会写得像,而是每句都能回到来源 2026/10/1 9:18:46

WorkBuddy 论文证据链:国产之光不是会写得像,而是每句都能回到来源

WorkBuddy 论文证据链:国产之光不是会写得像,而是每句都能回到来源 [!NOTE] 论文辅助最危险的是文字流畅却引用错位。高质量方法不是让 AI 替你写结论,而是先建立研究问题、证据卡和引用位置。 本课不会用“AI 一键完成”制造错觉,而是把 WorkBuddy、Zotero 7、Python 3.11…

阅读更多 →
Minecraft视距革命:Distant Horizons稳定版LOD与Vulkan解析 2026/10/1 9:18:46

Minecraft视距革命:Distant Horizons稳定版LOD与Vulkan解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
WorkBuddy 专利检索:关键词不再乱撞,从权利要求到证据地图一步走稳 2026/10/1 9:18:45

WorkBuddy 专利检索:关键词不再乱撞,从权利要求到证据地图一步走稳

WorkBuddy 专利检索:关键词不再乱撞,从权利要求到证据地图一步走稳 [!NOTE] 只搜产品名会漏掉同义技术,也会被摘要相似误导。专利检索要围绕技术特征、分类号、时间和权利要求逐层收敛。 本课不会用“AI 一键完成”制造错觉,而是把 WorkBuddy、公开专利数据库、Python 3.11…

阅读更多 →
海康威视摄像头网页配置全攻略:激活、插件、RTSP与排障 2026/10/1 9:18:45

海康威视摄像头网页配置全攻略:激活、插件、RTSP与排障

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
Transformer遥感变化检测实战:双时相影像像素级差异识别 2026/10/1 9:18:39

Transformer遥感变化检测实战:双时相影像像素级差异识别

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉