关于react.js:Reactdiff原理及应用

35次阅读

共计 10531 个字符,预计需要花费 27 分钟才能阅读完成。

抛砖引玉

React 通过引入 Virtual DOM 的概念,极大地防止有效的 Dom 操作,已使咱们的页面的构建效率提到了极大的晋升。然而如何高效地通过比照新旧 Virtual DOM 来找出真正的 Dom 变动之处同样也决定着页面的性能,React 用其非凡的 diff 算法解决这个问题。Virtual DOM+React diff 的组合极大地保障了 React 的性能,使其在业界有着不错的性能口碑。diff 算法并非 React 独创,React 只是对 diff 算法做了一个优化,但却是因为这个优化,给 React 带来了极大的性能晋升,不禁让人感叹 React 创造者们的智慧!接下来咱们就探索一下 React 的 diff 算法。

传统 diff 算法

在文章结尾咱们提到 React 的 diff 算法给 React 带来了极大的性能晋升,而之前的 React diff 算法是在传统 diff 算法上的优化。上面咱们先看一下传统的 diff 算法是什么样子的。

传统 diff 算法通过循环递归对节点进行顺次比照,效率低下,算法复杂度达到 O(n^3),其中 n 是树中节点的总数。

O(n^3) 到底有多可怕呢?这意味着如果要展现 1000 个节点,就要顺次执行上十亿次 的比拟,这种指数型的性能耗费对于前端渲染场景来说代价太高了。而 React 却这个 diff 算法工夫复杂度从 O(n^3)降到 O(n)。O(n^3)到 O(n)的晋升有多大,咱们通过一张图来看一下。

从下面这张图来看,React 的 diff 算法所带来的晋升无疑是微小无比的。接下来咱们再看一张图:

从 1979 到 2011,30 多年的工夫,才将工夫复杂度搞到 O(n^3),而 React 从开源到当初不过区区几年的工夫,却一下子干到 O(n),到这里不禁再次膜拜一下 React 的创造者们。
那么 React 这个牛逼的 diff 算法是如何做到的呢?

React diff 原理

后面咱们讲到传统 diff 算法的工夫复杂度为 O(n^3), 其中 n 为树中节点的总数,随着 n 的减少,diff 所消耗的工夫将出现爆炸性的增长。react 却利用其非凡的 diff 算法做到了 O(n^3)到 O(n)的飞跃性的晋升,而实现这一壮举的法宝就是上面这三条看似简略的 diff 策略:

  • Web UI 中 DOM 节点跨层级的挪动操作特地少,能够忽略不计
  • 领有雷同类的两个组件将会生成类似的树形构造,领有不同类的两个组件将会生成不同的树形构造
  • 对于同一层级的一组子节点,它们能够通过惟一 id 进行辨别

在下面三个策略的根底上,React 别离将对应的 tree diff、component diff 以及 element diff 进行算法优化,极大地晋升了 diff 效率。

tree diff

基于策略一,React 对树的算法进行了简洁明了的优化,即对树进行分层比拟,两棵树只会对同一档次的节点进行比拟。

既然 DOM 节点跨层级的挪动操作少到能够忽略不计,针对这一景象,React 只会对雷同层级的 DOM 节点进行比拟,即同一个父节点下的所有子节点。当发现节点曾经不存在时,则该节点及其子节点会被齐全删除掉,不会用于进一步的比拟。这样只须要对树进行一次遍历,便能实现整个 DOM 树的比拟。参考 React 实战视频解说:进入学习

策略一的前提是 Web UI 中 DOM 节点跨层级的挪动操作特地少,但并没有否定 DOM 节点跨层级的操作的存在,那么当遇到这种操作时,React 是如何解决的呢?

接下来咱们通过一张图来展现整个处理过程:

A 节点 (包含其子节点) 整个被挪动到 D 节点下,因为 React 只会简略地思考同层级节点的地位变换,而对于不 同层级的节点,只有创立和删除操作。当根节点发现子节点中 A 隐没了,就会间接销毁 A; 当 D 发现多了一个子节点 A,则会创 建新的 A(包含子节点)作为其子节点。此时,diff 的执行状况:create A → create B → create C → delete A。

由此能够发现,当呈现节点跨层级挪动时,并不会呈现设想中的挪动操作,而是以 A 为根节点的整个树被从新创立。这是一种影响 React 性能的操作,因而官网倡议不要进行 DOM 节点跨层级的操作。

在开发组件时,保持稳定的 DOM 构造会有助于性能的晋升。例如,能够通过 CSS 暗藏或显示节点,而不是真正地移
除或增加 DOM 节点。

component diff

React 是基于组件构建利用的,对于组件间的比拟所采取的策略也是十分简洁、高效的。

  • 如果是同一类型的组件,依照原策略持续比拟 Virtual DOM 树即可。
  • 如果不是,则将该组件判断为 dirty component,从而替换整个组件下的所有子节点。
  • 对于同一类型的组件,有可能其 Virtual DOM 没有任何变动,如果可能确切晓得这点,那么就能够节俭大量的 diff 运算工夫。因而,React 容许用户通过 shouldComponentUpdate()来判断该组件是否需进行 diff 算法剖析,然而如果调用了 forceUpdate 办法,shouldComponentUpdate 则生效。

接下来咱们看上面这个例子是如何实现转换的:

转换流程如下:

当组件 D 变为组件 G 时,即便这两个组件构造类似,一旦 React 判断 D 和 G 是不同类型的组件,就不会比拟二 者的构造,而是间接删除组件 D,从新创立组件 G 及其子节点。尽管当两个组件是不同类型但构造类似时,diff 会影响性能,但正如 React 官网博客所言: 不同类型的组件很少存在类似 DOM 树的状况,因而这种极其因素很难在理论开发过程中造成重大的影响。

element diff

当节点处于同一层级时,diff 提供了 3 种节点操作,别离为 INSERT_MARKUP (插入)、MOVE_EXISTING (挪动)和 REMOVE_NODE (删除)。

  • INSERT_MARKUP : 新的组件类型不在旧汇合里,即全新的节点,须要对新节点执行插入操作。
  • **MOVE_EXISTING : 旧汇合中有新组件类型,且 element 是可更新的类型,generateComponentChildren 已调用
    receiveComponent,这种状况下 prevChild=nextChild,就须要做挪动操作,能够复用以前的 DOM 节点。**
  • **REMOVE_NODE : 旧组件类型,在新汇合里也有,但对应的 element 不同则不能间接复用和更新,须要执行删除操作,或者
    旧组件不在新汇合里的,也须要执行删除操作。**

旧汇合中蕴含节点 A、B、C 和 D,更新后的新汇合中蕴含节点 B、A、D 和 C,此时新旧汇合进行 diff 差异化比照,发现 B!=A,则创立并插入 B 至新汇合,删除旧汇合 A; 以此类推,创立并插入 A、D 和 C,删除 B、C 和 D。


咱们发现这些都是雷同的节点,仅仅是地位产生了变动,但却须要进行繁冗低效的删除、创立操作,其实只有对这些节点进行地位挪动即可。React 针对这一景象提出了一种优化策略:容许开发者对同一层级的同组子节点,增加惟一 key 进行辨别。 尽管只是小小的改变,性能上却产生了天翻地覆的变动! 咱们再来看一下利用了这个策略之后,react diff 是如何操作的。

通过 key 能够精确地发现新旧汇合中的节点都是雷同的节点,因而无需进行节点删除和创立,只须要将旧汇合中节点的地位进行挪动,更新为新汇合中节点的地位,此时 React 给出的 diff 后果为:B、D 不做任何操作,A、C 进行挪动操作即可。

具体的流程咱们用一张表格来展示一下:

index 节点 oldIndex maxIndex 操作
0 B 1 0 oldIndex(1)>maxIndex(0),maxIndex=oldIndex,maxIndex 变为 1
1 A 0 1 oldIndex(0)<maxIndex(1), 节点 A 挪动至 index(1)的地位
2 D 3 1 oldIndex(3)>maxIndex(1),maxIndex=oldIndex,maxIndex 变为 3
3 C 2 3 oldIndex(2)<maxIndex(3), 节点 C 挪动至 index(3)的地位
  • index:新汇合的遍历下标。
  • oldIndex:以后节点在老汇合中的下标。
  • maxIndex:在新汇合拜访过的节点中,其在老汇合的最大下标值。

操作一栏中只比拟 oldIndex 和 maxIndex:

  • 当 oldIndex>maxIndex 时,将 oldIndex 的值赋值给 maxIndex
  • 当 oldIndex=maxIndex 时,不操作
  • 当 oldIndex<maxIndex 时,将以后节点挪动到 index 的地位

下面的例子仅仅是在新旧汇合中的节点都是雷同的节点的状况下,那如果新汇合中有新退出的节点且旧汇合存在 须要删除的节点,那么 diff 又是如何比照运作的呢?

index 节点 oldIndex maxIndex 操作
0 B 1 0 oldIndex(1)>maxIndex(0),maxIndex=oldIndex,maxIndex 变为 1
1 E 1 oldIndex 不存在,增加节点 E 至 index(1)的地位
2 C 2 1 oldIndex(2)>maxIndex(1),maxIndex=oldIndex,maxIndex 变为 2
3 A 0 2 oldIndex(0)<maxIndex(2), 节点 A 挪动至 index(3)的地位

注:最初还须要对旧汇合进行循环遍历,找出新汇合中没有的节点,此时发现存在这样的节点 D,因而删除节点 D,到此 diff 操作全副实现。

同样操作一栏中只比拟 oldIndex 和 maxIndex,然而 oldIndex 可能有不存在的状况:

  • oldIndex 存在

    1. 当 oldIndex>maxIndex 时,将 oldIndex 的值赋值给 maxIndex
    2. 当 oldIndex=maxIndex 时,不操作
    3. 当 oldIndex<maxIndex 时,将以后节点挪动到 index 的地位
  • oldIndex 不存在

    1. 新增以后节点至 index 的地位


当然这种 diff 并非白璧无瑕的,咱们来看这么一种状况:

理论咱们只需对 D 执行挪动操作,然而因为 D 在旧汇合中的地位是最大的,导致其余节点的 oldIndex < maxIndex,造成 D 没有执行挪动操作,而是 A、B、C 全副挪动到 D 节点前面的景象。针对这种状况,官网倡议:

在开发过程中,尽量减少相似将最初一个节点挪动到列表首部的操作。当节点数量过大或更新操作过于频繁时,这在肯定水平上会影响 React 的渲染性能。


因为 key 的存在,react 能够精确地判断出该节点在新汇合中是否存在,这极大地提高了 diff 效率。咱们在开发过中进行列表渲染的时候,若没有加 key,react 会抛出正告要求开发者加上 key,就是为了进步 diff 效率。然而加了 key 肯定要比没加 key 的性能更高吗?咱们再来看一个例子:

当初有一汇合[1,2,3,4,5], 渲染成如下的样子:<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
---------------
当初咱们将这个汇合的程序打乱变成[1,3,2,5,4]。1. 加 key
<div key='1'>1</div>             <div key='1'>1</div>     
<div key='2'>2</div>             <div key='3'>3</div>  
<div key='3'>3</div>  ========>  <div key='2'>2</div>  
<div key='4'>4</div>             <div key='5'>5</div>  
<div key='5'>5</div>             <div key='4'>4</div>  
操作:节点 2 挪动至下标为 2 的地位,节点 4 挪动至下标为 4 的地位。2. 不加 key
<div>1</div>             <div>1</div>     
<div>2</div>             <div>3</div>  
<div>3</div>  ========>  <div>2</div>  
<div>4</div>             <div>5</div>  
<div>5</div>             <div>4</div>  
操作:批改第 1 个到第 5 个节点的 innerText
---------------
如果咱们对这个汇合进行增删的操作改成[1,3,2,5,6]。1. 加 key
<div key='1'>1</div>             <div key='1'>1</div>     
<div key='2'>2</div>             <div key='3'>3</div>  
<div key='3'>3</div>  ========>  <div key='2'>2</div>  
<div key='4'>4</div>             <div key='5'>5</div>  
<div key='5'>5</div>             <div key='6'>6</div>  
操作:节点 2 挪动至下标为 2 的地位,新增节点 6 至下标为 4 的地位,删除节点 4。2. 不加 key
<div>1</div>             <div>1</div>     
<div>2</div>             <div>3</div>  
<div>3</div>  ========>  <div>2</div>  
<div>4</div>             <div>5</div>  
<div>5</div>             <div>6</div> 
操作:批改第 1 个到第 5 个节点的 innerText
---------------
通过下面这两个例子咱们发现:因为 dom 节点的挪动操作开销是比拟低廉的,没有 key 的状况下要比有 key 的性能更好。

通过下面的例子咱们发现,尽管加了 key 进步了 diff 效率,然而未必肯定晋升了页面的性能。因而咱们要留神这么一点:

对于简略列表页渲染来说,不加 key 要比加了 key 的性能更好

依据下面的状况,最初咱们总结一下 key 的作用:

  • 精确判断出以后节点是否在旧汇合中
  • 极大地缩小遍历次数

利用实际

页面指定区域刷新

当初有这么一个需要,当用户身份变动时,以后页面从新加载数据。猛一看过来感觉非常简单,没啥难度的,只有在 componentDidUpdate 这个生命周期里去判断用户身份是否产生扭转,如果产生扭转就从新申请数据,于是就有了以下这一段代码:

import React from 'react';
import {connect} from 'react-redux';
let oldAuthType = '';// 用来存储旧的用户身份
@connect(state=>state.user)
class Page1 extends React.PureComponent{
  state={loading:true}
  loadMainData(){
    // 这里采纳了定时器去模仿数据申请
    this.setState({loading:true});
    const timer = setTimeout(()=>{
      this.setState({loading:false});
      clearTimeout(timer);
    },2000);
  }
  componentDidUpdate(){const {authType} = this.props;
    // 判断以后用户身份是否产生了扭转
    if(authType!==oldAuthType){
      // 存储新的用户身份
      oldAuthType=authType;
      // 从新加载数据
      this.loadMainData();}
  }
  componentDidMount(){
    oldAuthType=this.props.authType;
    this.loadMainData();}
  render(){const {loading} = this.state;
    return (<h2>{` 页面 1${loading?'加载中...':'加载实现'}`}</h2>
    )
  }
}
export default Page1;

看上去咱们仅仅通过加上一段代码就实现了这一需要,然而当咱们页面是几十个的时候,那这种办法就显得顾此失彼了。哪有没有一个很好的办法来实现这个需要呢?其实很简略,利用 react diff 的个性就能够实现它。对于这个需要,实际上就是心愿以后组件能够销毁在从新生成,那怎么能力让其销毁并从新生成呢?通过下面的总结我发现两种状况,能够实现组件的销毁并从新生成。

  • 当组件类型产生扭转
  • 当 key 值发生变化
    接下来咱们就联合这两个特点,用两种办法去实现。

第一种:引入一个 loading 组件。切换身份时设置 loading 为 true,此时 loading 组件显示;切换身份实现,loading 变为 false,其子节点 children 显示。

<div className="g-main">{loading?<Loading/>:children}</div> 

第二种:在刷新区域加上一个 key 值就能够了,用户身份一扭转,key 值就产生扭转。

<div className="g-main" key={authType}>{children}</div>

第一种和第二种取舍上,集体倡议的是这样子的:

如果须要申请服务器的,用第一种,因为申请服务器会有肯定等待时间,退出 loading 组件能够让用户有感知,体验更好。如果是不须要申请服务器的状况下,选用第二种,因为第二种更简略实用。

更加不便地监听 props 扭转

针对这个需要,咱们喜爱将搜寻条件封装成一个组件,查问列表封装成一个组件。其中查问列表会接管一个查问参数的属性,如下所示:

import React from 'react';
import {Card} from 'antd';
import Filter from './components/filter';
import Teacher from './components/teacher';
export default class Demo2 extends React.PureComponent{
  state={
    filters:{
      name:undefined,
      height:undefined,
      age:undefined
    }
  }
  handleFilterChange=(filters)=>{
    this.setState({filters});
  }
  render(){const {filters} = this.state;
    return <Card>
      {/* 过滤器 */}      <Filter onChange={this.handleFilterChange}/>       {/* 查问列表 */}      <Teacher filters={filters}/>
    </Card>
  }
}

当初咱们面临一个问题,如何在组件 Teacher 中监听 filters 的变动,因为 filters 是一个援用类型,想监听其变动变得有些简单,好在 lodash 提供了比拟两个对象的工具办法,使其简略了。然而如果前期给 Teacher 加了额定的 props,此时你要监听多个 props 的变动时,你的代码将变得比拟难以保护。针对这个问题,咱们仍旧能够通过 key 值去实现,当每次搜寻时,从新生成一个 key,那么 Teacher 组件就会从新加载了。代码如下:

import React from 'react';
import {Card} from 'antd';
import Filter from './components/filter';
import Teacher from './components/teacher';
export default class Demo2 extends React.PureComponent{
  state={
    filters:{
      name:undefined,
      height:undefined,
      age:undefined
    },
    tableKey:this.createTableKey()}
  createTableKey(){return Math.random().toString(36).substring(7);
  }
  handleFilterChange=(filters)=>{
    this.setState({
      filters,
      // 从新生成 tableKey
      tableKey:this.createTableKey()});
  }
  render(){const {filters,tableKey} = this.state;
    return <Card>
      {/* 过滤器 */}      <Filter onChange={this.handleFilterChange}/>       {/* 查问列表 */}      <Teacher key={tableKey} filters={filters}/>
    </Card>
  }
}

即便前期给 Teacher 退出新的 props,也没有问题,只需拼接一下 key 即可:

 <Teacher key={`${tableKey}-${prop1}-${prop2}`} filters={filters} prop1={prop1} prop2={prop2}/>

react-router 中 Link 问题

先看一下 demo 代码:

import React from 'react';
import {Card,Spin,Divider,Row,Col} from 'antd';
import {Link} from 'react-router-dom';

const bookList = [{
  bookId:'1',
  bookName:'三国演义',
  author:'罗贯中'
},{
  bookId:'2',
  bookName:'水浒传',
  author:'施耐庵'
}]
export default class Demo3 extends React.PureComponent{
  state={bookList:[],
    bookId:'',
    loading:true
  }
  loadBookList(bookId){
    this.setState({loading:true});
    const timer = setTimeout(()=>{
      this.setState({
        loading:false,
        bookId,
        bookList
      });
      clearTimeout(timer);
    },2000);
  }
  componentDidMount(){const {match} = this.props;
    const {params} = match;
    const {bookId} = params;
    this.loadBookList(bookId);
  }
  render(){const {bookList,bookId,loading} = this.state;
    const selectedBook = bookList.find((book)=>book.bookId===bookId);
    return <Card>
      <Spin spinning={loading}>
        {          selectedBook&&(<div>
            <img width="120" src={`/static/images/book_cover_${bookId}.jpeg`}/>
            <h4> 书名:{selectedBook?selectedBook.bookName:'--'}</h4>
            <div> 作者:{selectedBook?selectedBook.author:'--'}</div>
          </div>)        }        <Divider orientation="left"> 关联图书 </Divider>
        <Row>
          {bookList.filter((book)=>book.bookId!==bookId).map((book)=>{const {bookId,bookName} = book;              return <Col span={6}>
                <img width="120" src={`/static/images/book_cover_${bookId}.jpeg`}/>
                <h4><Link to={`/demo3/${bookId}`}>{bookName}</Link></h4>
              </Col>
            })          }        </Row>
      </Spin>
    </Card>
  }
}

通过演示 gif,咱们看到了地址栏的地址曾经产生扭转,然而并没有咱们设想中那样从新走一遍 componentDidMount 去申请数据,这阐明咱们的组件并没有实现销毁并从新生成这么一个过程。解决这个问题你能够在 componentDidUpdate 去监听其扭转:

  componentDidUpdate(){const {match} = this.props;
    const {params} = match;
    const {bookId} = params;
    if(bookId!==this.state.bookId){this.loadBookList(bookId);
    }
  }

后面咱们说过如果是前期须要监听多个 props 的话,这样子前期保护比拟麻烦. 同样咱们还是利用 key 去解决这个问题,首页咱们能够将页面封装成一个组件 BookDetail,并且在其外层再包裹一层,再去给 BookDetail 加 key, 代码如下:

import React from 'react';
import BookDetail from './bookDetail';
export default class Demo3 extends React.PureComponent{render(){const {match} = this.props;
    const {params} = match;
    const {bookId} = params;
    return <BookDetail key={bookId} bookId={bookId}/>
  }
}

这样的益处是咱们代码构造更加清晰,后续拓展新性能比较简单。

结语:

  • React 的高效得益于其 Virtual DOM+React diff 的体系。diff 算法并非 react 独创,react 只是在传统 diff 算法做了优化。但因为其优化,将 diff 算法的工夫复杂度一下子从 O(n^3)降到 O(n)。
  • React diff 的三大策略:

    • Web UI 中 DOM 节点跨层级的挪动操作特地少,能够忽略不计。
    • 领有雷同类的两个组件将会生成类似的树形构造,领有不同类的两个组件将会生成不同的树形构造。
    • 对于同一层级的一组子节点,它们能够通过惟一 id 进行辨别。
  • 在开发组件时,保持稳定的 DOM 构造会有助于性能的晋升。
  • 在开发过程中,尽量减少相似将最初一个节点挪动到列表首部的操作。
  • key 的存在是为了晋升 diff 效率,但未必肯定就能够晋升性能,记住简略列表渲染状况下,不加 key 要比加 key 的性能更好。
  • 懂得借助 react diff 的个性去解决咱们理论开发中的一系列问题。

正文完
 0