概述

• 函数式组件 无状态,react 流
• 状态组件 内部状态管理

强类型

• 强类型趋势,大型项目的构建基础!
• 类型推导开发体验会更好

设计目标

• 开放底层功能
  • render 函数的改造点？
• 更小
  • 按需加载,利用 tree shaking 来源于 webpack 的设计理念
• 更快
  • 采用 proxy 对象替换访问器属性,proxy 实际上属于浏览器底层拦截器,所以效率高于访问器属性
• 更易维护
  • monorepo 来源于 babel 的思想,多包系统,分离关注

vdom

依赖追踪粒度

• 属性,存在大量监察对象
• 组件,以视图为粒度
• 节点,更新包含子组件

优化方法：

1. 减少运行时监察,在编译时只提取动态需监听的节点进行刷新
   1. 动态节点的判断条件？
   2. 模板解析规则？

重点只能对模板进行静态分析,对自定义 render 是无法利用到此优势的, 应为 render 属于运行时绑定无法触发静态分析流程

由于使用 vdom 表征 dom 所以可以实现跨平台适配

函数式

需要看一下 rxjs!!!! 优点无状态

• [ ] 函数式配置相比对象配置的优势？
  • 由于对象配置默认结构已知无法 tree-shaking,采用函数方式可以在编译时依据 import ,知晓引入的特性可以利用此技术压缩体积

逻辑复用

• mixin 问题
  • 命名空间冲突
  • [ ] 为什么要清楚来源?
• [ ] 高阶组件,需学习此概念?

通过暴露函数返回值的方式实现复用,函数式复用！

函数式混入的优势是可自由组合!!你可以定义多个不同的功能集 通过组合实现复用,而混入不具有此特性

hooks

• [ ] 学习 react hooks!!!

vue2 -> vue3

1. 采用函数组织视图的模型
2. 利用 setup 挂载复用的模型数据, setup 周期早于 beforeCreated
3. composition api
   1. 混入进行复用的问题
      1. 无法追踪依赖的来源
      2. 存在命名冲突
      3. 解决方案
         1. Hoc ,无法解决依赖来源的问题,存在额外组件包裹问题
         2. Slots, 存在额外的组件包裹问题
         3. compositon api,不存在上述问题
            1. 追踪鼠标滚动的示例
   2. 实践将基于配置的复杂组件拆分为基于特性的组合,组件是一系列特性的集合,每个单独的特性都可以复用