- 博客(13)
- 收藏
- 关注
RSS订阅原创 实现diff更新children
diff，diff更新逻辑，diff更新children，diff删除多余的老节点，解决case，优化更新，减少不必要的计算
2024-02-04 17:21:17
1349
1
原创 实现更新props
4. 这一操作可以在Dom树转化链表的过程中进行实现，设置一个alternate（交替的意思）属性代表一个指针，去指向老的节点，那么后续处理后边的节点时，我们可以通过child去指向下一个节点，当后续没有child节点时，我们可以寻找它的兄弟sibling节点，并且指向他，依次进行操作。（2）更新props里，之前我们定义的只是实现了初始化的过程，那么这一次我们对比新旧props的情况。有三种：1.老的存在，新的不存在，删除 2.新的存在，老的不存在，创建 3.新的存在，老的也存在，更新。
2024-02-02 15:39:43
885
原创 实现function component
实现function component 处理function component的props传参 重构function component 将处理function component和处理正常dom节点的分开封装起来。代码更加的简洁。
2024-01-31 17:45:19
412
原创 实现任务调度器以及fiber架构
实现任务调度器以及fiber架构 浏览器提供的API：requestIdleCallback 实现fiber架构：1. 创建dom2. 处理props 3. 将树形结构转化为链表结构 4. 返回下一个要执行的任务 总结：1. 递归代码在较大数据量的情况下比较容易造成卡顿。递归代码需要一次性执行完，而且数据量特别大的时候容易出现爆内存。为了解决递归的问题，一般都会将递归代码转成遍历代码。对于 dom 树则需要转成链表结构进行遍历，边执行边转换的技巧也比较优雅。再结合指针，使得链表遍历可以随时停
2024-01-31 11:28:38
1229
原创 简单的mini-react基本搭建
简单的mini-react基本搭建 1. dom节点渲染 2. react搭建的Api的引用 3. 了解了基本的dom渲染以及api的引用。我们就可以通过命令进行框架的一个搭建，并且使用JSX文件
2024-01-21 15:33:47
360
原创 实现mini版react
实现mini版react，该文章将会从以下功能进行逐个实现，从而完成迷你版的react。1. 实现简单的mini-react基本搭建2. 实现任务调度器以及fiber架构3. 实现代码的统一提交4. 实现function component5. 实现事件绑定6. 实现更新props7. 实现diff更新children8. 实现useState9. 实现useEffect。功能实现完后，可以掌握架构的一些基本搭建，对数据结构有了近一层次的提升，并且提升了调试代码的能力以及通过debug的形式找出报错点或者使
2024-01-21 14:29:21
372
原创 for..in..和for..of..的区别
for..in..,for..of..,Uncaught TypeError: obj2 is not iterable
2023-08-17 15:59:02
53
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人