首页
沸点
课程
数据标注
HOT
AI Coding
更多
直播
活动
APP
插件
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
从0实现react
自由人863
创建于2024-07-03
订阅专栏
基于卡颂老师的课程学习总结
暂无订阅
共5篇文章
创建于2024-07-03
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
React 性能优化
性能优化 什么是性能优化 命中「性能优化」的组件可以不通过 reconcile 生成 wip.child,而是直接复用上次更新生成的 wip.child
2.更新后为多节点
三种情况 节点的位置没有变化 节点的增加或删除 节点的移动 实现思路: 两轮遍历, 第一轮遍历尝试复用所有节点 此情况最为常见,节点的位置没有变化(作为性能优化) 第一轮遍历后有一下三种情况 新节点遍
react Diff(1) 更新后为单节点
更新后为单节点 只有在 key 与 type 相同时 才能复用当前节点 其他情况都不能复用 实现思路: 找出比较节点的 key 与 type 相同则复用 删除其他不能复用的兄弟节点 代码实现
实现reconciler 架构
React Reconciler 是 React 内部用于协调和管理组件更新的模块。它的主要任务是根据组件的变化(如状态更新或属性更改),高效地计算出需要更新的部分,并将这些更新应用到真实 DOM 中
1. react 学习 JSX
什么是jsx JSX 是 JavaScript XML 的缩写,它允许我们在 JavaScript 代码中直接编写类似 HTML 的语法,从而更直观地描述 UI 结构