跳到主要内容

react

react如何实现数据响应？​

React实现数据响应的核心原理是通过虚拟DOM（Virtual DOM）和协调算法（Reconciliation Algorithm）来实现高效的DOM更新

  • 虚拟DOM 简单来说就是 比较前后两个虚拟DOM树的差异，并找出需要更新的部分。
  • 协调算法：是React渲染过程的核心部分，负责高效地更新DOM，该算法确保React仅更新实际发生更改的DOM部分，最小化不必要的重新渲染和DOM操作

React 在 setState 时发生了什么？​

  • 1、React 会为当前节点创建一个 updateQueue 的更新列队
  • 2、然后会触发reconciler（协调器）—— 负责找出变化的组件
    • 在这个过程中，会使用名为 Fiber 的调度算法，开始生成新的 Fiber 树
  • 3、然后Scheduler（调度器）—— 调度任务的优先级，高优任务优先进入Reconciler，具体是执行 doWork 方法。
  • 4、React 会执行一遍 updateQueue 中的方法，以获得新的节点
  • 5、React 进入 commit 阶段
  • 6、在 commit 阶段中，React 会根据前面为各个节点打的Tag，一次性更新整个 dom 元素

react中key​

  • 在react中key是服务于diff算法, 它的默认值是null,

  • 在diff算法过程中, 新旧节点是否可以复用, 首先就会判定key是否相同, 其后才会进行其他条件的判定

  • key用于识别哪些元素被改变了 【删除、添加】

  • 给元素加一个标识

  • 循环列表的时候，根据key来判断某个元素是否被改变，改变就重新渲染，否则就复用之前的元素

    • 这就可以提高了渲染性能，减少不必要的渲染

  • 为了高效的更新虚拟DOM

为什么不能用index索引作为key？​

当使用index作为key

  • 当删除列表中间的某条数据的时候，列表的每一项index索引会发生变化，因此key也会发生变化，导致没有变化的数据也会因为索引发生变化而会重新渲染，这会影响性能
  • 数组顺序发生变化但是内容并没有变化，由于index会发生变化，对应的key也会发生变化，会造成重新渲染