纯HTML模板用Redux需手动绑定DOM与store：初始化store、监听状态变化、每次变化后重写对应DOM节点；常见错误包括dispatch后未调render、innerHTML漏清空旧内容、reducer未兜底undefined initialState、subscribe传函数执行结果而非引用、render中未优先用textContent防XSS。
纯 HTML 模板里做状态管理，不引入框架时最容易出问题的不是逻辑写错，而是状态和 DOM 没对齐——比如 dispatch 了但没 render，或者 render 时漏清空旧内容，导致视图重复叠加、数据错乱、XSS 风险。
为什么 store.subscribe 传函数却立即执行？
常见错误是写成 store.subscribe(render()) 或 store.subscribe(render) 而不是 store.subscribe(() => render())。前者会立刻调用 render 一次，且后续状态变化时不再触发；后者才是正确注册回调。Redux 的 subscribe 机制只存函数引用，不自动加括号执行。
- 必须用箭头函数或
bind绑定上下文，避免this丢失 - 如果
render依赖外部变量（如容器元素），建议闭包捕获，别在订阅回调里反复查 DOM - 每次
subscribe返回一个unsubscribe函数，组件销毁时记得调用，否则内存泄漏
reducer 第一个参数为 undefined 怎么办？
调用 createStore(reducer) 时不传 preloadedState，reducer(state, action) 的 state 参数初始就是 undefined。直接解构或访问 state.xxx 会报错。
- 必须显式兜底：
const initialState = { count: 0 };然后return state === undefined ? initialState : ... - 更稳妥写法是用空对象合并：
return { ...initialState, ...state, ...changes }，但注意深浅拷贝边界 - 别在
reducer里写if (!state) return initialState这种模糊判断——state可能是null或0，严格用=== undefined
innerHTML = templateString 为什么总多出旧内容？
这是最常被忽略的 DOM 同步陷阱：直接赋值不等于“替换”，而是“覆盖”。如果模板字符串为空、或生成逻辑有分支未覆盖全部状态，旧节点就残留着。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 每次
render前必须清空容器：el.innerHTML = ''或el.textContent = ''（后者更安全） - 优先用
textContent更新纯文本，防 XSS；插结构才用innerHTML，且确保模板字符串完整、无拼接漏洞 - 若用
document.createElement动态构建，记得el.replaceChildren(...nodes)替代反复appendChild
Web Component 里怎么桥接全局 store？
Custom Element 不感知 Redux，不能把 store 实例挂到 this.store 上——多个组件实例共享同一引用，connectedCallback 可能多次触发，造成重复 subscribe。
- 在
connectedCallback里首次订阅，用this._unsubscribe存返回函数，disconnectedCallback里调用它 - 属性变更走
attributeChangedCallback，比如监听count属性变化后dispatch({ type: 'SET_COUNT', payload: newValue }) - 组件内部状态（如展开/收起）用
this._localState = { expanded: false }独立管理，和全局 store 完全隔离
真正难的不是写通状态流，而是让每一次 dispatch 都可预测地触发一次干净的 render，且 DOM 更新不破坏已有交互或无障碍语义。调试时先盯住控制台有没有重复订阅日志、DOM 元素是否意外嵌套、textContent 和 innerHTML 是否混用——这些地方一错，整个状态同步链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
