React面试：谈谈虚拟DOM，Diff算法与Key机制

最新推荐文章于 2024-05-05 23:09:32 发布

beifeng11996

最新推荐文章于 2024-05-05 23:09:32 发布

阅读量413

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/beifeng11996/article/details/128608794

版权

本文介绍了React中的虚拟DOM技术，它通过将真实DOM转换为JavaScript对象来提高性能。虚拟DOM在数据更新后进行对比，使用Diff算法找出最小更新策略。此外，文章详细讨论了Diff算法的tree diff、component diff和element diff策略，以及key机制在提高性能和渲染效率中的作用。key机制使得React能够识别并移动已存在的DOM元素，减少不必要的重渲染。

摘要由CSDN通过智能技术生成

1.虚拟dom

原生的JS DOM操作非常消耗性能，而React把真实原生JS DOM转换成了JavaScript对象。这就是虚拟Dom（Virtual Dom）

每次数据更新后，重新计算虚拟Dom，并和上一次生成的虚拟dom进行对比，对发生变化的部分作批量更新。在此其中，React提供了componentShouldUpdate生命周期来让开发者手动控制减少数据变化后不必要的虚拟dom对比，提升性能和渲染效率。

原生html元素代码：

<div class="title">
      <span>Hello ConardLi</span>
      <ul>
        <li>苹果</li>
        <li>橘子</li>
      </ul>
</div>

在React可能存储为这样的JS代码：

const VitrualDom = {
   
  type: 'div',
  props: {
    class: 'title' },
  children: [
    {
   
      type: 'span',
      children: 'Hello ConardLi'
    },
    {
   
      type: 'ul',
      children: [
        {
    type: 'li',