2023-02-13

[kongmingLatern]

2023-02-13

1. 你学习了哪些知识？

2. 学习过程中是否有存在的问题？

关于如何写每日任务：

如何写每日任务

[kongmingLatern]

今日学习小结

1. React 源码学习之旅

1.1. jsx 转换以及打包

1.2. Reconciler 架构

1.2.1 核心模块消费 JSX 的过程

当前已知的数据结构：React Element React Element 如果作为核心模块操作的数据结构，存在的问题；

• 无法表达节点之间的关系
• 字段有限，不好扩展（比如：无法表达状态）

所以，需要一种新的数据结构，他的特点：

• 介于 React Element 与 真实 UI 节点之间
• 能够表达节点之间的关系
• 方便扩展（不仅作为数据存储单元，也能作为工作单元） 这就是 FiberNode（虚拟 DOM 在 React 中的实现）

1.2.2 reconciler 的工作特点

对于同一个节点，比较其 React Element 与 fiberNode，生成子 fiberNode。并根据比较的结果生成不同标记（插入、删除、移动......），对应不同 宿主环境 API 的执行

1.2.3 JSX 消费的顺序

• 如果有子节点，遍历子节点
• 如果没有子节点，遍历兄弟节点

  <Card>
  <h3>你好</h3>
  <p>React</p>
  </Card>

  这是个递归的过程，存在递、归两个阶段

• 递：对应 beginWork
• 归：对应 completeWork

1.3. 如何触发更新

常见的触发更新的方式：

• ReactDOM.createRoot().render( 或老版的 ReactDOM.render )
• this.setState
• useState 的 dispatch 方法

我们希望实现一套统一的更新机制，他的特点是：

• 兼容上述触发更新的方式
• 方便后续的扩展（优先级机制......）

1.3.1 更新机制的组成部分

• 代表更新的数据结构——Update
• 消费 update 的数据结构 —— UpdateQueue

工作包括：

• 实现 mount 时调用的 API
• 将该 API 接入上述更新机制中

需要考虑的事情：

• 更新可能发生于任意组件、而更新流程是从根节点递归的
• 需要一个统一的根节点保存通用信息

2. 开源社区

2.1 Nuxt devTools

功能

• 依赖可视化【可视图】
• 点击页面中的区域，跳到 VsCode 中的指定段落
• 点击路由，自动切换
• 可以查看各种依赖包的执行时间
• 内置 VsCode

存在的问题

• 性能问题
• 内存分配问题

带来问题的思考

• 是否可以制作一个点击页面中的属性后，自行更改，并将代码同步更新至VsCode【低代码】
  • 更改之后，点击更新，同步代码
  • 可视化的 CSS 调试工具 —?—> 响应式变量
  • 个性化的调试工具？
    • 自定义路由