zoukankan      html  css  js  c++  java
  • React的Diff算法

    使用React或者RN开发APP如果不知道Diff算法的话简直是说不过去啊。毕竟“知其然,知其所以然”这句老话从远古喊到现代了。

    以下内容基本是官网文章的一个总结、压缩。这次要谦虚一下,毕竟深入研究RN的时间不多,如果有什么理解的不对的地方还请各位读者指正。

    React的组件在渲染之后组成了一个树形结构。在React绘制的时候,会在内存里对应每一个组件建立一个节点,并最终形成一个和组件树结构一样的树。我们就叫这个树叫影子树(这个叫法不是出自官方)。我们可以理解为这个影子树包含了React App组建的结构和一些属性值

    在组件发生变化的时候(一般是调用了setState),React会形成一个影子树二号。然后对比影子树1号和影子树2号的不同。

    我们知道对比两个树的最小不同的时间复杂度是O(n3
    ),n是树里的节点数。这个复杂度下,稍有量级的应用都会遇到一个问题:无法忽略的慢。于是,FB的同学们使用了更加高效的启发式算法,把复杂度降低到了O(n)。

    但是,不管是什么算法最后都需要对比两个节点的不同。有三种情况需要考虑:

    一、节点之间的比较

    节点,英语里的Node,包括两种类型:一个是React组件,一个是HTML的DOM。下文也是同样的含义。

    节点类型不同

    如果是HTML DOM不同的话,直接使用新的替换旧的。

    如果是组件类型不同的话也直接使用新的替换旧的。

    HTML DOM类型相同

    在React里样式并不是一个纯粹的字符串,而是一个对象,这样的话在样式发生改变的时候只需要改变替换变化以后的样式。修改完当前节点之后,递归处理该节点的子节点。

    组件类型相同

    组件类型相同的,使用React机制处理。一般是使用新的props替换掉旧的props,并在之后调用组件的componentWill/DidReceiveProps方法,之前的组件的render方法会被调用。节点的比较机制开始递归作用于这个它的子节点上。

    二、两个列表之间的比较

    一列节点中的一个发生了改变,React并没有什么好方法来处理这个问题。循环新旧两个列表,并找出不同是React唯一的处理方法。

    但是,有一个可以把这个算法的复杂度降低的办法。那就是我们在生成一列节点的时候给每一个节点上添加一个key。这个key只需要在这一列节点中唯一,不需要全局唯一

    三、取舍

    需要注意的是,上面的启发式算法是基于两点假设:
    *类型想听的节点总是生成同样的树,而类型不同的节点也总是生成不同的树。
    *可以为多次render都表现稳定的节点设置key。

    上面的节点之间的比较算法基本就是基于这两个假设而实现的。也就是要提高React应用的效率,需要我们按照这两点假设来开发

    否则,React会重获整个APP。那就是噩梦一样的情况了。

  • 相关阅读:
    java cocurrent并发包
    阻塞队列只有一个线程在同一时刻对其进行或者读或者写
    在并发编程中使用生产者和消费者模式能够解决绝大多数并发问题。该模式通过平衡生产线程和消费线程的工作能力来提高程序的整体处理数据的速度。
    深入理解生产者消费者
    java并发编程阻塞队列
    高并发
    ClassLoader Java中类加载出现在哪个阶段,编译期和运行期? 类加载和类装载是一样的吗
    JAVA设计模式之工厂模式(简单工厂模式+工厂方法模式)
    Java并发编程-Executor框架(转)
    Java主线程等待所有子线程执行完毕再执行解决办法(转)
  • 原文地址:https://www.cnblogs.com/sunshine-anycall/p/5950650.html
Copyright © 2011-2022 走看看