摘要：
大部分优化环节react都自己在内部处理了，但有一种情况也值得开发者注意，那就是列表中key的使用，合理的使用key有助于能精确的找到用于新旧节点复用的老节点。那么我们这里来学习下react 是如何diff children的，从源码的角度看。 用几个案例来描述React diffChild核心流程 阅读全文
posted @ 2024-09-07 12:10
飞向火星
阅读(72)
评论(0)
推荐(0)
摘要：
在react 16之前的版本中，虚拟dom节点的数据结构看起来大致如下 const VitrualDom = { type: 'div', props: { class: 'title' }, children: [ { type: 'span', children: 'Hello ConardLi 阅读全文
posted @ 2024-09-06 21:24
飞向火星
阅读(35)
评论(0)
推荐(0)
摘要：
伪类选择器就是我们常用的 :hover、:link、:focus、:nth-child(n)等 伪元素一般使用两个引号 ::before、::after、::first-line。 伪类和伪元素的区别 伪类的操作对象是文档数中已有的元素，而伪元素则是创建了一个文档树外的元素。有没有创建一个文档树外的 阅读全文
posted @ 2024-09-05 16:51
飞向火星
阅读(26)
评论(0)
推荐(0)
摘要：
tree diff主要针对的是react dom节点跨层级的操作。什么是跨层级的操作呢？ 除同级之外的操作都是跨层级。比如A节点下有B和C，A的同级有个小狗节点，现在把整个A节点移到小狗节点下。 对于这种跨层级操作，react只会进行创建和删除操作，当根节点发现子节点A消失了，就会直接销毁A，当小狗 阅读全文
posted @ 2024-09-03 22:13
飞向火星
阅读(24)
评论(0)
推荐(0)
摘要：
所谓的diff算法，其实就是react 同时比较两棵虚拟dom树之间的差异，一颗是当前的dom结构，另一棵在react状态变更将要重新渲染时生成。react通过比较这两棵树的差异，决定是否需要修改dom结构，以及如何修改。并且，最大程度的复用旧的节点，来减少真实的dom渲染。在这个过程中进行比较的算 阅读全文
posted @ 2024-09-03 12:19
飞向火星
阅读(116)
评论(0)
推荐(0)
摘要：
首先，先简单介绍一下什么是diff，在react或者vue框架中。组件更新时，不会直接去操作DOM，而是首先更新虚拟dom。比如一次更新中，更新了10次数据，那么反应到页面上，就会更新10次dom。这是很浪费性能的，所以虚拟dom就产生了，把10从更新，聚集到一块，统一更新一次虚拟dom，让后再更新 阅读全文
posted @ 2024-09-02 20:56
飞向火星
阅读(25)
评论(0)
推荐(0)
浙公网安备 33010602011771号