首页 > 其他分享 >React循环DOM时为什么需要添加key

React循环DOM时为什么需要添加key

时间:2022-10-18 08:55:09浏览次数:72  
标签:DOM 元素 React mutation key 节点

一、React 渲染流程和更新流程

  • react渲染流程:jsx -> 虚拟dom -> 真实dom
  • react更新流程:props/state改变 -> render函数重新执行 -> 生成新的虚拟dom树 -> 新旧虚拟dom树进行diff -> 计算出差异进行更新 ->更新到真实的dom树

所以在每次更新的时候,React需要基于这两颗不同的树之间的差别来判断如何有效的更新UI,如果一棵树参考另外一棵树进行完全比较更新,那么即使是最先进的算法,该算法的复杂程度为 O(n3),其中 n 是树中元素的数量,如果在React中使用了该算法,那么展示1000个元素所需要执行的计算量将在十亿的量级范围,这个开销太过昂贵了,React的更新性能会变得非常低效;于是React对这个算法进行了优化,将其优化成了O(n),这也就是传说中的diff算法

二、diff 算法

diff 算法做了三处优化

  1. 同层节点之间相互比较,不会垮节点比较
  2. 不同类型的节点,产生不同的树结构
  3. 开发中,可以通过key来指定哪些节点在不同的渲染下保持稳定

2-1 对比不同类型的元素

  • 当节点为不同的元素,React会拆卸原有的树,并且建立起新的树:当一个元素从<a>变成<img>,从<Article>变成<Comment>,或从<Button>变成<div>都会触发一个完整的重建流程

  • 当卸载一棵树时,对应的DOM节点也会被销毁,组件实例将执行 componentWillUnmount() 方法;

  • 当建立一棵新的树时,对应的 DOM 节点会被创建以及插入到 DOM 中,组件实例将执行 componentWillMount()方法,紧接着 componentDidMount() 方法

  • 比如下面的代码更改:React 会销毁 Comment 组件并且重新装载一个新的组件,而不会对Counter进行复用;

<div>
    <Comment />
</div>

<span>
    <Comment />
</span>

2-2 对比同一类型的元素

  • 当比对两个相同类型的 React 元素时,React 会保留 DOM 节点,仅比对及更新有改变的属性

  • 比如下面的代码更改:通过比对这两个元素,React 知道只需要修改 DOM 元素上的 className 属性

<div className="before" title="stu" />
<div className="after" title="stu" />
  • 比如下面的代码更改:当更新 style 属性时,React 仅更新有所更变的属性。通过比对这两个元素,React 知道只需要修改 DOM 元素上的 color 样式,无需修改 fontWeight。
<div style={{color="red",fontWeight:"bold"}} />
<div style={{color="green",fontWeight:"bold"}} />
  • 如果是同类型的组件元素:组件会保持不变,React会更新该组件的props,并且调用componentWillReceiveProps() 和 componentWillUpdate() 方法,下一步调用 render() 方法,diff 算法将在之前的结果以及新的结果中进行递归;

2-3 对子节点递归

  • 在默认条件下,当递归 DOM 节点的子元素时,React 会同时遍历两个子元素的列表;当产生差异时,生成一个mutation(改变)。

  • 如果在最后插入一条数据的情况:前面两个比较是完全相同的,所以不会产生mutation,最后一个比较,产生一个mutation,将其插入到新的DOM树中即可,但是如果是在前面插入一条数据,React会对每一个子元素产生一个mutation,而不是保持 <li>星际穿越</li><li>盗梦空间</li>的不变;这种低效的比较方式会带来一定的性能问题,所以就得使用key来优化

后面插一条数据
<ul>
     <li>星际穿越</li>
     <li>盗梦空间</li>
 </ul>
 <ul>
     <li>星际穿越</li>
     <li>盗梦空间</li>
     <li>大话西游</li>
 </ul>

 前面插一条数据
 <ul>
     <li>星际穿越</li>
     <li>盗梦空间</li>
 </ul>
 <ul>
     <li>大话西游</li>
     <li>星际穿越</li>
     <li>盗梦空间</li>
 </ul>

参考:前端react面试题详细解答

三、key

要切记,在 diff 算法中,可以通过 key 来指定哪些节点在不同的渲染下保持稳定,并且要保证 key 是唯一的,不要使用随机数(随机数在下一次render时,会重新生成一个数字),也不能使用index,这都对性能是没有优化的

import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      movies: ["星际穿越", "盗梦空间"],
    };
  }

  render() {
    return (
      <div>
        <h2>电影列表</h2>
        <ul>
          {this.state.movies.map((item, index) => {            return <li key={item}>{item}</li>;          })}        </ul>
        <button onClick={(e) => this.insertMovie()}>添加电影</button>
      </div>
    );
  }

  insertMovie() {
    this.setState({
      movies: ["大话西游", ...this.state.movies],
    });
  }
}

代码解析:在默认条件下,当递归 DOM 节点的子元素时,React 会同时遍历两个子元素的列表;当产生差异时,生成一个mutation。如果在movies后面添加数据,前面两个比较是完全相同的,所以不会产生mutation;最后一个比较,产生一个mutation,将其插入到新的DOM树中即可;
如果在movies前面添加数据,React会对每一个子元素产生一个mutation,而不是保持 <li>星际穿越</li><li>盗梦空间</li>的不变,这种低效的比较方式会带来一定的性能问题,
当子元素(这里的li)拥有 key 时,React 使用 key 来匹配原有树上的子元素以及最新树上的子元素:
在下面这种场景下,key为"星际穿越"和"盗梦空间"的元素仅仅进行位移,不需要进行任何的修改; 将key为"大话西游"的元素插入到最前面的位置即可;

标签:DOM,元素,React,mutation,key,节点
From: https://www.cnblogs.com/beifeng1996/p/16801423.html

相关文章

  • react.js+easyui 做一个简单的商品表
    效果图:    importReactfrom'react';import{Form,FormField,Layout,DataList,LayoutPanel,Panel,Label,CheckBox,TextBox,Tabs,TabPanel,DateBox,......
  • python学习记录9:代码雨效果(random库练习)源码
     importsysimportrandomimportpygamefrompygame.localsimport*#屏幕大小WIDTH=800HEIGHT=600#下落速度范围SPEED=[15,30]#字母大小范围SIZ......
  • document.getElementById二次获取dom节点问题
    最近发现了个问题就是通过id获取dom节点不能二次获取只能首次获取并且不能当作基础节点二次获取也就是id不能这样使用今天才发现以前一直认为可以的原因不知a=docum......
  • html2canvas实现dom转成图片变下载
    importhtml2canvasfrom"./html2canvas.min.js";newhtml2canvas(document.getElementById('cur-cert-img'),{allowTaint:true,......
  • React Native-ios环境的搭建
    本文基于​​RN中文网​​。要在mac系统上搭建RN环境:一、安装Homebrew。它是一款MacOS平台下的软件包管理工具。详见Homebrew的安装这篇文章。 二、安装node和watchman,用H......
  • React-hooks+TypeScript最佳实战
    ReactHooks什么是HooksReact一直都提倡使用函数组件,但是有时候需要使用state或者其他一些功能时,只能使用类组件,因为函数组件没有实例,没有生命周期函数,只有类组件才......
  • 经常被问到的react-router实现原理详解
    在单页面应用如日中天发展的过程中,备受关注的少了前端路由。而且还经常会被xxx面试官问到,什么是前端路由,它的原理的是什么,它是怎么实现,跳转不刷新页面的...一大堆为什么,......
  • React高阶组件详解
    在说高阶组件之前,我们先了解一下什么是高阶函数和以及高阶组件的定义。高阶组件的定义高阶函数定义 1.接受一个或多个函数作为输入(参数) 2.输出一个函数高阶函数举例:Ja......
  • 【100个 Unity实用技能】| C# 检查字典中是否存在某个Key的几种方法
    Unity小科普老规矩,先介绍一下Unity的科普小知识:Unity是实时3D互动内容创作和运营平台。包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助Unity将创意变......
  • React-hooks面试考察知识点汇总
    Hook简介Hook出世之前React存在的问题在组件之间复用状态逻辑很难React没有提供将可复用性行为“附加”到组件的途径(例如,把组件连接到store)。有一些解决此类问题的......