2025.3.3

讲讲 react 中 hooks 的原理

具体是怎么实现 dom 节点的替换的

vue 是怎么做双向数据绑定的，为什么 data 是数组的话 改变下标不会发生改变。

react 组件的传值种类

kn 的技术架构设计：

1. 入口模块（entry）负责初始化应用，加载核心模块和扩展；2. 核心模块（core）包含 stores、common 和 components 三大部分，stores 管理全局状态，common 提供公共功能，components 负责 UI 渲染；3. 扩展模块（extensions）通过注册机制挂载到核心模块上，提供额外功能如硬件支持、发布作品等；4. API 模块负责与后端通信，处理数据请求和响应；5. 工具模块（utils）提供各种辅助功能。整体架构采用了模块化和可扩展的设计，通过事件机制和状态管理实现模块间的松耦合通信。

2. 构建系统

• 使用 webpack 作为构建工具

• 通过 craco 进行 webpack 配置的扩展

• 自定义了 CssExtractPlugin 插件来优化 CSS 加载性能

• 实现了代码分割和资源优化

1. 项目结构

• src/api：API 接口封装

• src/common：公共功能模块

• src/components：可复用的 UI 组件

• src/extensions：可扩展的功能模块

• src/stores：状态管理

• src/utils：工具函数

1. 技术栈选项

• React 作为前端框架

• MobX 进行状态管理

• TypeScript 提供类型支持

• Ant Design 作为 UI 组件库

1. 工程化实践

• 使用 ESLint 和 Prettier 规范代码

• 配置了 Git Hooks 进行提交检查

• 完整的 CI/CD 流程配置

• Docker 容器化部署支持

1. 扩展性设计

• 通过 extensions 机制实现功能模块的插件化

• 支持国际化

• 支持主题定制

各个模块之间的调用顺序

1. 入口初始化

• src/index.tsx 作为主入口，负责初始化各个核心模块

• 通过 entry/index.ts 初始化不同的工作模式（普通、硬件、少儿等）

1. 状态管理

stores/index.ts 定义了多个 Store 用于状态管理：

• CommonStore：通用状态

• RuntimeStore：运行时状态

• WorkStore：作品相关状态

• ConfigStore：配置相关状态

• ComponentsStore：组件状态

1. 事件系统

• common/event-emitter 实现了一个统一的事件系统

• 通过 EventEmitterManager 类管理事件的订阅和发布

• EventType 枚举定义了系统支持的所有事件类型

1. 扩展机制

• extensions/core.ts 实现了插件注册机制

• 通过 registerExtensions 方法注册各类扩展

• 支持硬件扩展如 microbit、tudao 等

1. 组件系统

• components/Dialog 实现了统一的对话框管理

• 基于 mobx-react-lite 实现组件的状态管理

• 使用 Transition 组件实现过渡动画

1. API 层

• api/index.ts 导出了主要的 API 模块：

  • HandlerApi：处理各类操作

  • ServiceApi：服务相关接口

  • DialogApi：对话框相关接口

这些模块通过事件系统和状态管理实现了松耦合的通信，扩展机制则提供了良好的可扩展性。