snakeshe1010

本文介绍了如何优化自研 Mini React，使组件在更新时只重新渲染自身，避免整棵树无效更新。通过记录当前组件的 Fiber 并利用闭包返回独立的更新函数，实现了组件级别...

本次课程我们来优化下目前的代码，目前我们在更新子组件的时候其它组件也会更新，会造成不必要的性能浪费。 问题现状 初始app.js 点了按钮之后每一个组件都会进行渲染 期望每...

本次实践解决了 mini-react 中因 JSX 条件渲染返回 false 导致 Fiber 构建异常的问题，核心在于正确过滤无效节点并保障 sibling 链接关系。...

本次课程我们来处理一个edge case. 代码如下，现在运行会报错。 尝试定位问题 打印一下child，出现false，找到了问题点，false不是textNode也不是...

使用 ChatGPT 结合《老友记》（Friends）学习英语口语，是一个非常有效又有趣的方法。以下是一个系统的学习方法，分为五个步骤，每一步我都会告诉你具体怎么用 Cha...

本节我们实现了 Fiber 更新过程中的“多余子节点删除”逻辑，确保新旧节点数量不一致时能正确更新 DOM。通过 while 循环收集所有多余旧节点并加入删除队列，有效解决...

本节课我们去实现一下更新中的另外一个场景，当新的节点比老的短，多出来的节点需要删除掉。 构建例子App.tsx 发现点击之后child没有删除 通过图去理解 新的节点链表多...

本节课我们来学习一下mini-react中的更新和删除，核心就是当type不一致删除旧的创建新的。 举个例子如下图 div变成p 添加测试代码App.jsx 现在没有实现删...

本文讲解了在 mini-react 中实现组件更新和删除的过程。通过比较旧新节点的 type 实现替换策略，借助 deletions 队列实现统一删除，并对函数组件做了特殊...

重构迷你React：引入wipRoot与协调子节点优化 在构建React-like框架的过程中，我们通过重构实现了更清晰的架构和更高效的协调机制。本次重构主要围绕两个核心优...

本节课我们来重构一下之前的代码。 首先我们可以把root改为wipRoot，这是正在构建中的根节点和下面的currentRoot区分。 update的调整，赋值给wipRo...

慎重！小公司到底要不要搞自己的低代码？ 同学们好，我想结合自己的亲身经历，谈谈我对低代码开发的看法，讨论下人手和精力本就有限的小公司到底要不要搞低代码（中大厂无论资源还是K...

本文实现了Mini-React的props更新机制：1) 通过currentRoot记录当前树；2) 使用alternate对比新旧节点；3) 在commit阶段根据eff...

这节课我们来实现一下mini-react中的更新props。 第一步. 我们需要得到新的Dom树 更新想要获得Dom树可以和初始化一样通过render函数 但是这里更新，需...

本文介绍了在 mini - react 中实现事件绑定的方法。首先在 Counter 组件中添加了点击事件，并通过打印 Fiber 来观察 DOM 结构。...

本节课我们来实现给我们的mini-react项目添加绑定事件。 先在app.jsx中添加click事件 通过打印，观察一下fiber中的button，方便后续处理 1.pn...

本文系统梳理了四类沉浸式英语口语学习工具： AI对话类（如咕噜口语、Hi Echo）——24小时AI语伴深度互动，精准纠音与场景还原...