JavaScript组件化核心是封装状态、隔离逻辑、声明式渲染、可组合更新四思路；可用Class封装生命周期，函数组件模拟Hooks，vnode+diff实现声明式更新，children和插槽支持组合嵌套。
JavaScript 实现组件化，核心不是复制 React 的 API，而是掌握“封装状态、隔离逻辑、声明式渲染、可组合更新”这四个关键思路。你不需要框架也能写出类似 React 风格的可复用 UI 组件——关键是设计模式和运行时约定。
用类封装状态与生命周期
每个组件应是一个独立的状态容器。用 ES6 Class 封装数据、模板、事件和更新逻辑：
- 构造函数（constructor）初始化 props 和 state
- 提供 render() 方法返回 HTML 字符串或 DocumentFragment
- 定义 mount(el) 把渲染结果插入 DOM，并绑定事件
- 可选实现 update(newProps) 做浅比对 + 局部重绘（避免全量替换）
例如一个计数器组件：
class Counter {
constructor({ initial = 0 }) {
this.state = { count: initial };
this.el = null;
}
render() {
return `
<div class="counter">
<span>Count: ${this.state.count}</span>
<button onclick="this.parentElement.__inc()">+</button>
</div>
`;
}
mount(el) {
this.el = el;
el.innerHTML = this.render();
// 手动绑定方法到 DOM 元素（或用事件委托）
el.querySelector('button').__inc = () => {
this.state.count++;
this.update();
};
}
update() {
const newHtml = this.render();
this.el.innerHTML = newHtml;
// 重新绑定事件（或更优：用事件委托 + dataset 标识）
}
}
用函数组件 + Hooks 思维管理副作用
不依赖 React，也能模拟 useState / useEffect 的行为。关键在于闭包 + 状态寄存器：
立即学习“Java免费学习笔记（深入）”；
- 写一个全局 useState(initial) 函数，内部用数组存储多个 state 变量，靠调用顺序保证一致性
- 写 useEffect(callback, deps)，在每次更新后比对依赖数组，触发回调
- 组件函数本身只负责返回虚拟节点（如普通对象：
{ type: 'div', props: {}, children: [...] }），由统一的 render(vnode, container) 函数递归挂载
这样你的组件就可以是纯函数：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
function Button({ label, onClick }) {
const [loading, setLoading] = useState(false);
useEffect(() => {
if (loading) {
const timer = setTimeout(() => setLoading(false), 1000);
return () => clearTimeout(timer);
}
}, [loading]);
return {
type: 'button',
props: {
onclick: () => { setLoading(true); onClick?.(); }
},
children: loading ? ['Loading...'] : [label]
};
}
用模板字符串 + 属性代理实现声明式更新
避免手动操作 DOM，把更新逻辑收口到统一的 patch 函数中：
- 组件返回结构化的 vnode（类型、属性、子节点），而非 HTML 字符串
- vnode 支持 key 属性，diff 算法据此复用已有 DOM 节点
- 用 Object.defineProperty 或 Proxy 包裹 state，拦截 set 触发自动 re-render
例如：
const state = reactive({ count: 0 });
// reactive 返回 Proxy，set 时触发所有订阅它的组件更新
组合与嵌套：通过 children 和插槽机制
可复用性来自组合。给组件预留 children 接口，并支持命名插槽（如 <slot name="header">）：
- 父组件传入函数作为 children，子组件在 render 中调用它生成内容
- 用正则或 AST 解析模板字符串中的 slot 标签，动态替换内容
- 卡片组件可以接收 header/body/footer 三个函数，自由定制结构
这样你就能写出类似这样的用法：
<Card>
{() => (
<Header>用户信息</Header>
<Body>
<UserAvatar user={user} />
<UserInfo user={user} />
</Body>
)}
</Card>
不复杂但容易忽略的是：组件化真正的门槛不在语法，而在约束——比如强制 props 不可变、state 更新必须触发明确的响应、事件不直接操作父组件 DOM。这些纪律，比代码本身更重要。
