JavaScript组件化是工程实践而非语言特性，核心为状态+视图+生命周期的封装，需明确数据来源、渲染逻辑与更新时机，遵循只读props、自主state管理、副作用清理、语义化命名及Web Components跨框架方案。
JavaScript 本身没有原生组件模型，所谓“组件化”是靠约定、工具链和运行时机制构建出来的抽象——不是语言特性，而是工程实践。
组件化本质是状态 + 视图 + 生命周期的封装单元
无论用 React、Vue 还是手写，一个可复用的组件必须明确回答三个问题：数据从哪来（props/state）、渲染成什么（render/return）、什么时候该更新或清理（mount/unmount/effect）。漏掉任一环，就容易出现内存泄漏、视图不同步或 props 覆盖失效。
-
props应只读，任何修改都应通过回调通知父级，而非直接props.xxx = yyy -
state必须由组件自身管理，且更新需触发重渲染；手动修改this.state（类组件）或绕过setState/useState（函数组件）会导致 UI 脱节 - 副作用（如定时器、事件监听、fetch）必须在组件卸载前清除，否则可能调用已销毁组件的
setState，抛出Can't perform a React state update on an unmounted component
纯函数式组件比类组件更易遵循单一职责原则
函数组件天然倾向“输入确定输出”，适合做展示型组件；而逻辑复用靠自定义 Hook，而不是继承或高阶组件（HOC）。HOC 容易导致 wrapper hell 和 ref 丢失，React.memo 和 useMemo 才是控制粒度的关键。
- 避免在组件内部写业务逻辑（如 API 请求、表单校验），抽成独立函数或 Hook，例如
useForm、useApi - 组件名必须语义化，不叫
MyComp，而用UserCard、DataTable—— 名字即契约，影响团队协作和代码搜索 - 默认导出组件，但把类型定义（TypeScript）、默认 props、测试用例作为命名导出，例如
export const defaultProps，方便 Storybook 或单元测试直接引用
跨框架组件化要靠 Custom Elements 或微前端沙箱
想让一个组件同时跑在 React 和 Vue 项目里？别指望 JSX 或 v-model 直接通用。真正可行的是用 Web Components 标准：customElements.define() 注册，用 HTMLElement 原生生命周期，属性通信走 observedAttributes，事件发 CustomEvent。
立即学习“Java免费学习笔记（深入）”；
- 不依赖
React.createElement或defineComponent，所有逻辑基于connectedCallback/disconnectedCallback - 样式隔离必须用
Shadow DOM，否则全局 CSS 会污染宿主页面；slot替代children，part替代 CSS-in-JS 的主题定制 - 如果要用 React/Vue 封装 Web Component，注意 React 18+ 对
ref的处理变化：需用createRef绑定到原生元素，而非直接传ref属性
class CounterElement extends HTMLElement {
static get observedAttributes() { return ['count']; }
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.count = 0;
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'count') this.count = Number(newValue) || 0;
}
connectedCallback() {
this.render();
}
render() {
this.shadowRoot.innerHTML = `
<style>button { margin: 4px; }</style>
<div>Count: <span id="value">${this.count}</span></div>
<button id="inc">+</button>
<button id="dec">−</button>
`;
this.shadowRoot.querySelector('#inc').onclick = () => {
this.count++;
this.setAttribute('count', this.count);
this.dispatchEvent(new CustomEvent('change', { detail: this.count }));
};
}
}
customElements.define('x-counter', CounterElement);
组件化最难的不是语法，而是边界划分——哪些逻辑该进组件，哪些该交给外部协调。比如分页器要不要自己请求数据？答案通常是“不”，它只负责暴露 onPageChange，由父组件决定是刷新列表还是跳转 URL。这个决策点，比怎么写 useState 更影响长期维护成本。
