![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
mini-react
文章平均质量分 63
咖啡有点苦^
这个作者很懒,什么都没留下…
展开
-
实现useEffect
实现useEffect、实现cleanup、mini-react原创 2024-02-21 15:36:43 · 390 阅读 · 0 评论 -
实现useState
useState, 实现useState,批量执行action,提前检测 减少不必要的更新原创 2024-02-05 15:37:11 · 424 阅读 · 1 评论 -
实现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 阅读 · 0 评论 -
实现事件绑定
实现事件绑定 触发事件更新 执行到这一步,接下来就是针对dom树的更新了,如何比较新旧节点,如何更新props原创 2024-02-01 10:49:48 · 383 阅读 · 1 评论 -
实现function component
实现function component 处理function component的props传参 重构function component 将处理function component和处理正常dom节点的分开封装起来。代码更加的简洁。原创 2024-01-31 17:45:19 · 412 阅读 · 0 评论 -
实现代码的统一提交
实现代码的统一提交 (节点转化完后,页面的渲染的统一提交进行)原创 2024-01-31 14:58:05 · 366 阅读 · 0 评论 -
实现任务调度器以及fiber架构
实现任务调度器以及fiber架构 浏览器提供的API:requestIdleCallback 实现fiber架构:1. 创建dom2. 处理props 3. 将树形结构转化为链表结构 4. 返回下一个要执行的任务 总结:1. 递归代码在较大数据量的情况下比较容易造成卡顿。递归代码需要一次性执行完,而且数据量特别大的时候容易出现爆内存。为了解决递归的问题,一般都会将递归代码转成遍历代码。对于 dom 树则需要转成链表结构进行遍历,边执行边转换的技巧也比较优雅。再结合指针,使得链表遍历可以随时停原创 2024-01-31 11:28:38 · 1229 阅读 · 0 评论 -
简单的mini-react基本搭建
简单的mini-react基本搭建 1. dom节点渲染 2. react搭建的Api的引用 3. 了解了基本的dom渲染以及api的引用。我们就可以通过命令进行框架的一个搭建,并且使用JSX文件原创 2024-01-21 15:33:47 · 360 阅读 · 0 评论 -
实现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 阅读 · 0 评论