内容简介:React 使用虚拟 DOM 将计算好之后的更新发送到真实的 DOM 树上,减少了频繁操作真实 DOM 的时间消耗,但将成本转移到了 JavaScript 中,因为要计算新旧 DOM 树的差异嘛。所以这个计算差异的算法是否高效,就很关键了。React 中其计算差异的过程叫正式讨论前,先来看个问题。假设我们有一个展示百分比的柱状条组件,其宽度由是传入的数值决定。并且它带动画,如果传入的值变化,那么柱状条应该由 0 动画到需要展示的宽度。
React 使用虚拟 DOM 将计算好之后的更新发送到真实的 DOM 树上,减少了频繁操作真实 DOM 的时间消耗,但将成本转移到了 JavaScript 中,因为要计算新旧 DOM 树的差异嘛。所以这个计算差异的算法是否高效,就很关键了。React 中其计算差异的过程叫 Reconciliation ,可理解成调和前后两次渲染的差异。
正式讨论前,先来看个问题。
问题
假设我们有一个展示百分比的柱状条组件,其宽度由是传入的数值决定。并且它带动画,如果传入的值变化,那么柱状条应该由 0 动画到需要展示的宽度。
即想要实现的效果如下:
预期的百分比柱状条效果
所以我们写了如下的柱状条组件:
function Bar({ score }) { const [width, setWidth] = useState(0); // 调试用 useEffect(() => { console.log("组件初始化完成"); return () => { console.log("组件即将销毁"); }; }, []); useEffect(() => { console.log("score 发生变化"); const timer = setTimeout(() => { setWidth(score); }, 0); return () => { clearTimeout(timer); }; }, [score]); const style = { width: `${width}%` }; return ( <div className="bar-wrap'"> <div className="bar" style={style}> {width} </div> </div> ); }
因为要实现动画,所以一开始我们并不将组件接收到的值应用到样式上,而是先将宽度设置为 0,等组件完成初始化之后,再在 setTimeout
中将组件的宽度设置为传入的 props 上的值,这样就能看到动画了。
调用:
const data1 = [10, 20]; const data2 = [50, 20, 10]; function App() { const [data, setData] = useState(data1); return ( <div> <button onClick={() => { setData(prev => (prev === data1 ? data2 : data1)); }} > switch data </button> {data.map((score, index) => { return ( <div> <Bar score={score} /> </div> ); })} </div> ); }
实际得到的结果:
实际得到的结果
每次的动画不会从 0 开始,第二个元素根本就没有动画。通过查看打印到控制台的信息,可发现在数据发生变化后, <Bar>
组件是没有销毁的,说明该组件在 props 更新时进行了复用,这是观察到的一点线索。
你可能会说,这里应该在每次渲染前,也就是 setTimeout
之前,先重置一下数据将宽度设置为 0,这样便能得到想要实现的效果:每次都从 0 开始动画。同时,为了看清过程,不防将 setTimeout
的时间暂时加大。
useEffect(() => { console.log("score 发生变化"); + setWidth(0); const timer = setTimeout(() => { setWidth(score); - }, 0); + }, 1000); return () => { clearTimeout(timer); }; }, [score]);
每次动画前初始化
可以看到,并没有什么用。依然会有一个减小的动画。如果将 setTimeout
置回到 0,只是看不到这个缩减到 0 过程,而是缩减到目标值的这一过程。并且对于第二个元素,因为前后 props 并没有发生变化,连缩小的过程也没有。
React 的 diff 机制
对于树的差异检测,按照 这个论文 中描述的算法实现,其时间复杂度为 O(n 3 ) 。而页面中 DOM 节点很容易上千,这样一次渲染需要 diff 的操作超过十亿,显然不可行。所以 React 在进行 diff 时作了两个假设前提:
key
基于这两点假设,在进行 diff 时可以少很多工作量,
key
这样假设之后,React 的 diff 算法做到了时间复杂度为 O(n)。
DOM 节点的 diff
区分为节点类型变化与没变化两种情况,
对于前后再次渲染中,同一位置元素类型变化的情况,如前文所述,对该元素及其子节点整个更新。比如由 <section>
变成 <div>
,该位置的 <section>
及其所有子节点将整个销毁,其中的状态也丢弃掉,创建 <div>
及相应子元素替换在该位置。
对于类型没变的情况则比较元素的属性,得出差异后只更新相应属性,比如 className
。样式有更新也只计算出变化的样式属性然后只更新该属性。
组件节点的 diff
对于自己写的组件,类型变化时同 DOM 节点一样,将整个组件实例销毁,其中各状态将丢失,所有子节点也都销毁,这些组件的 componentWillUnmount()
生命周期函数将被触发。然后实例化新类型的组件替换在该位置,新实例化的组件其 componentWillMount()
及 componentDidMount()
生命周期函数将顺次触发。
如果该位置组件类型没变,说明只需要根据变化的 props
更新组件即可,无需重新实例化新的组件。 组件实例中的状态将在两次渲染中被保留复用 ,组件的 componentWillReceiveProps()
及 componentWillUpdate()
生命周期函数将触发。
子节点的遍历及 key
属性
上面描述了节点对比后的处理。对于节点内子节点,递归遍历时,应用相同的逻辑。考察下面的示例代码:
<ul> <li>first</li> <li>second</li> </ul> <ul> <li>first</li> <li>second</li> + <li>third</li> </ul>
React 在遍历 <ul>
的子节点时,能够将前两个 <li>
元素匹配,保持不动,然后将新增的 <li>third</li>
附加在列表最后,完成更新。
如果新插入的元素不在列表最后,而是在最前面或中间,事情就开始发生变化。
<ul> <li>Duke</li> <li>Villanova</li> </ul> <ul> + <li>Connecticut</li> <li>Duke</li> <li>Villanova</li> </ul>
这时 React 简单地按位置来对比更的模式就变得不那么智能了。由前文所述,
- 在进行第一个子元素
<li>
的对比时,发现其内容由<li>Duke</li>
变为了<li>Connecticut</li>
,于是将该位置的元素更新。 - 继续对比,发现原来第二个位置的
<li>Villanova</li>
变为了<li>Duke</li>
,执行更新操作。 - 再继续发现需要新增
<li>Villanova</li>
元素。
这是 React 真实的流程,并不是我们一眼就能看出来的那个样子,只需要在列表开头插入那个新增的元素,将其他子元素保留即可。
所以,对于这样的列表类型,如果元素频繁变动,势必导致更新的效率会很低。问题的根本在于 React 不能识别前后两次渲染哪些元素其实是同一个,而是根据其在组件树中的位置来进行 diff 的。如果我们手动为元素指定一个唯一标识,这个标识在前后再次渲染时如果不变的话,这样就相当于告诉 React 它们是同一个元素,而不是按照其所在列表中的位置来进行 diff。
这便是元素身上的 key
属性。其值一定是能够唯一标识该元素的,这个唯一是指兄弟节点之间唯一即可,比如列表中同类型的列表元素。如果兄弟节点 key
重复,React 会有警告提醒。
再来看上面的示例,
<ul> <li key="2015">Duke</li> <li key="2016">Villanova</li> </ul> <ul> <li key="2014">Connecticut</li> <li key="2015">Duke</li> <li key="2016">Villanova</li> </ul>
通过读取元素身上的 key
,再次比较时 React 能够智能地得出结论,本次更新只需要插入 <li key="2014">Connecticut</li>
,剩余的其他子节点可直接复用。这样处理子节点的 diff 时效率就大大提升了。
所以你通过遍历方式生成一堆子节点时,React 会提示你需要为元素设置 key
属性。
Warning: Each child in a list should have a unique "key" prop.
默认情况下,如果没有显式指定 key
,React 默认使用其在列表中的索引作为 key
。但这个属性最好是来自需要渲染的数据条目的 id,这样能够最大程度地与数据保持一致,如果数据变化了,id 必然变化,则重新渲染。直接使用 for
循环中的 index
索引来做为 key
是不推荐的。因为索引不体现数据的变化,如果列表数据变化了,比如进行了排序,原来位置的数据可能不是原来的那条数据了,但因为 索引没变 ,React 按照每个位置还是同一个元素的 diff 逻辑来处理,该位置的组件复用前一次渲染的状态,势必产生 bug。下面是一个简单展示这一问题的示例:
function Item({ name }) { const [score, setScore] = useState(); return ( <div> name:{name} <input type="text" onChange={e => { setScore(e.target.value); }} /> score is: {score} </div> ); } function App() { const [persons, updatePersons] = useState(["tom", "david"]); return ( <div> <h3>set age for each person</h3> {persons.map((name, index) => { return <Item key={index} name={name} />; })} <div> <button onClick={() => { updatePersons(prev => ["lily", ...prev]); }} > add person </button> </div> </div> ); }
上面的示例遍历一个包含了姓名的数组,为每个人生成一行可输入分数的表单项。同时我们将每个生成项的 key
设置成索引 index
。
展示将 `key` 设置成索引导致组件内部状态不对的问题
可以看到,分数设置在列表中子组件中,当添加新的条目后,原来索引位置的组件复用之前的组件状态,因为该位置 key
相同,不会整个重新渲染。所以新增在第一位的 lily
,本来还没有为其设置分数,但它使用了原来在那个位置的 tom
的分数,同时,其他元素因为位置变化了,他们所持有的状态都错位了。
修正 key
之后再次操作表现就正常了。
function App() { const [persons, updatePersons] = useState(["tom", "david"]); return ( <div> <h3>set age for each person</h3> {persons.map((name, index) => { - return <Item key={index} name={name} />; + return <Item key={name} name={name} />; })} <div> <button onClick={() => { updatePersons(prev => ["lily", ...prev]); }} > add person </button> </div> </div> ); }
这里假设每条数据其 name
值是不一样的,所以将它作为列表元素的唯一标识。
修正 `key` 之后的正常表现
问题的解决
回到文章开头的问题,就可以理解其表现了。
const data1 = [10, 20]; const data2 = [50, 20, 10];
默认情况下,React 使用 index 作为 key
。
setTimeout
修正的方法可以为元素指定一个随机的 key
,这样每次组件都会重新渲染,不会复用之前的状态。
function App() { const [data, setData] = useState(data1); return ( <div> <button onClick={() => { setData(prev => (prev === data1 ? data2 : data1)); }} > switch data </button> {data.map((score, index) => { return ( - <div> + <div key={Math.random()}> <Bar score={score} /> </div> ); })} </div> ); }
修正后的百分比柱状条效果
将 key
设置成随机值是不推荐的做法,因为这样 React 就没法在渲染过程中对组件进行重用的优化。但像这里的特殊情况,你需要知道的是其中的原理,然后清楚自己在这样做时的影响。
总结
虚拟 DOM 将操作浏览器 DOM 的成本一部分转嫁到了 JavaScript 中,即进行差异计算的成本。提高了渲染的效率,但某些情况下也会是一个坑。
需要注意的是,React 的差异算法高效性是在两个假设前提下进行的,
key
以上所述就是小编给大家介绍的《React 虚拟 DOM 的差异检测机制》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。