⚡ 30 秒速记

• 组件封装一块职责，不只是拆文件
• 属性传输入，事件或回调表达输出
• 状态归属明确，共享状态放合适上层
• JSX 是界面描述语法，编译后仍是代码
• 复用看语义相同，别只看外观相似

组件化就是把一块界面的输入、状态和交互责任收在清楚的边界里。 父组件通过属性提供数据，子组件通过事件或回调报告变化，内部细节可以独立调整。JSX 让界面描述更直观，编译后仍由框架完成渲染。抽组件时要看变化原因是否一致，两块内容只是长得像却业务规则不同，强行合并往往会堆出大量开关。

版本校准： 本文出现 Object.defineProperty、Dep、Watcher 和双端 Diff 时，主要描述 Vue 2 实现；Vue 3 使用 Proxy、effect 与新的渲染器路径。Vue 2 已于 2023-12-31 结束维护，新项目应以 Vue 3 为基线，旧项目参考 Vue 2 EOL 官方说明 制定迁移与安全策略。

一、说一下对组件化的理解

1.1 组件的封装

• 视图
• 数据
• 变化逻辑

1.2 组件的复用

• props 传递
• 复用

二、JSX 本质是什么

2.1 JSX 语法

• html 形式
• 引入 JS 变量和表达式
• 循环
• style 和 className
• 事件

• JSX 语法根本无法被浏览器所解析
• 那么它如何在浏览器运行？

2.2 JSX 解析

• JSX 其实是语法糖
• 开发环境会将 JSX 编译成 JS 代码
• JSX 的写法大大降低了学习成本和编码工作量
• 同时，JSX 也会增加 debug成本

2.3 JSX 独立的标准

• JSX 是 React 引入的，但不是 React 独有的
• React已经将它作为一个独立标准开放，其他项目也可用
• React.createElement 是可以自定义修改的
• 说明：本身功能已经完备；和其他标准监控和扩展性没问题

三、JSX 和 vdom 的关系

3.1 为何需要 vdom

• vdom 是 React初次推广开来的，结合 JSX
• JSX 就是模板，最终要渲染成 html
• 初次渲染 + 修改 state 后的 re-render
• 正好符合 vdom 的应用场景

3.2 React.createElement 和 h

3.3 何时 patch

• 初次渲染 - ReactDOM.render(<App/>, container)
• 会触发 patch(container, vnode)
• re-render - setState
• 会触发 patch(vnode, newVnode)

3.4 自定义组件的解析

• ‘div’ - 直接渲染 <div> 即可，vdom 可以做到
• Input 和 List ，是自定义组件（class），vdom 默认不认识
• 因此 Input 和 List 定义的时候必须声明 render 函数
• 根据 props 初始化实例，然后执行实例的 render 函数
• render 函数返回的还是 vnode对象