- 博客(100)
- 收藏
- 关注
原创 Fiber
1. Fiber 出现的目的是什么为了提高 React 渲染页面的效率,减少页面卡顿,提升用户体验。2. 在 Fiber 出现之前 React 存在什么问题在 React 15 版本中采用的是 Virtual DOM 对比方案,通过对比 Virtual DOM 找出差异部分,从而只将差异部分更新到页面中,避免更新整体 DOM 以提高性能。<body> <ul id="list"></ul> <button id="btn">更改数据<
2022-03-10 10:22:43
289
原创 手写Vue3.0响应式
一. ReflectReflect(反射) 是一个内置的对象,它提供拦截 JavaScript 操作的方法。Reflect的所有属性和方法都是静态的(就像Math对象)。Reflect 对象提供了的静态方法与proxy handler methods的命名相同.其中的一些方法与 Object相同, 尽管二者之间存在 某些细微上的差别 .二. proxy语法new Proxy(target, handler)参数targetProxy 会对 target 对象进行包装。它可以是任何类型的对
2020-12-14 18:07:25
428
原创 一文弄懂Vue中Diff算法
Vue中Diff算法解读功能diff 算法的核心是对比新旧节点的 children,更新 DOM执行过程:要对比两棵树的差异,可以取第一棵树的每一个节点依次和第二课树的每一个节点比较,但这样的时间复杂度为 O(n^3),在DOM 操作时很少会把一个父节点移动/更新到某一个子节点,因此只需要找同级别子节点依次比较,然后再找下一级别的节点比较,这样算法的时间复 杂度为 O(n)主要有以下三个步骤:第一:遍历新旧节点第二:Diff算法(对比同级节点)为了保证Dom节点的顺序跟虚拟DOM中
2020-08-26 17:54:42
1461
原创 什么是虚拟Dom
虚拟Dom$定义Virtual DOM(虚拟DOM),是由普通的 JS 对象来描述 DOM 对象,因为不是真实的 DOM 对象,所以叫 Virtual DOM.$示例{ sel: "div", data: {}, children: undefined, text: "Hello Virtual DOM", elm: undefined, key: undefined}$为什么使用1.手动操作 DOM比较麻烦,还需要考虑浏览器兼容性问题,虽然有jQuery等库简化
2020-08-24 15:41:15
1084
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅
2