snakeshe1010

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

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

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

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

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

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

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

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

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