Vue 和 React 的组件更新粒度有什么区别？

迈不过友情╰ 2023-02-16 12:25 26阅读 0赞

## 前言 ##

我们都知道 Vue 对于响应式属性的更新，只会精确更新依赖收集的当前组件，而不会递归的去更新子组件，这也是它性能强大的原因之一。

## 例子 ##

举例来说 这样的一个组件：

我们在触发 `this.msg = 'Hello, Changed~'` 的时候，会触发组件的更新，视图的重新渲染。

但是 `<ChildComponent />` 这个组件其实是不会重新渲染的，这是 Vue 刻意而为之的。

## React的更新粒度 ##

而 React 在类似的场景下是自顶向下的进行递归更新的，也就是说，React 中假如 `ChildComponent` 里还有十层嵌套子元素，那么所有层次都会递归的重新render（在不进行手动优化的情况下），这是性能上的灾难。（因此，React 创造了`Fiber`，创造了异步渲染，其实本质上是弥补被自己搞砸了的性能）。

他们能用收集依赖的这套体系吗？不能，因为他们遵从`Immutable`的设计思想，永远不在原对象上修改属性，那么基于 `Object.defineProperty` 或 `Proxy` 的响应式依赖收集机制就无从下手了（你永远返回一个新的对象，我哪知道你修改了旧对象的哪部分？）

同时，由于没有响应式的收集依赖，React 只能递归的把所有子组件都重新 `render` 一遍，然后再通过 `diff算法` 决定要更新哪部分的视图，这个递归的过程叫做 `reconciler`，听起来很酷，但是性能很灾难。

## Vue的更新粒度 ##

那么，Vue 这种精确的更新是怎么做的呢？其实每个组件都有自己的渲染 `watcher`，它掌管了当前组件的视图更新，但是并不会掌管 `ChildComponent` 的更新。

那么有同学可能要问了，如果我们把 `msg` 这个响应式元素通过props传给 `ChildComponent`，此时它怎么更新呢？

其实，`msg` 在传给子组件的时候，会被保存在子组件实例的 `_props` 上，并且被定义成了响应式属性，而子组件的模板中对于 `msg` 的访问其实是被代理到 `_props.msg` 上去的，所以自然也能精确的收集到依赖，只要 `ChildComponent` 在模板里也读取了这个属性。

这里要注意一个细节，其实父组件发生重渲染的时候，是会重新计算子组件的 `props` 的，具体是在 `updateChildComponent` 中的：

// update props
      if (propsData && vm.$options.props) {
        
        toggleObserving(false)
        // 注意props被指向了 _props
        const props = vm._props
        const propKeys = vm.$options._propKeys || []
        for (let i = 0; i < propKeys.length; i++) {
        
          const key = propKeys[i]
          const propOptions: any = vm.$options.props // wtf flow?
          // 就是这句话，触发了对于 _props.msg 的依赖更新。
          props[key] = validateProp(key, propOptions, propsData, vm)
        }
        toggleObserving(true)
        // keep a copy of raw propsData
        vm.$options.propsData = propsData
      }

那么，由于上面注释标明的那段代码，`msg` 的变化通过`_props` 的响应式能力，也让子组件重新渲染了，到目前为止，都只有真的用到了 `msg` 的组件被重新渲染了。

这也是为什么我们说：**Vue 的响应式更新粒度是精细到组件级别的**。

正如官网 `api` 文档中所说：

> `vm.$forceUpdate`：迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。—— vm-forceUpdate文档

我们需要知道一个小知识点，`vm.$forceUpdate` 本质上就是触发了渲染`watcher`的重新执行，和你去修改一个响应式的属性触发更新的原理是一模一样的，它只是帮你调用了 `vm._watcher.update()`（只是提供给你了一个便捷的api，在设计模式中叫做门面模式）

注意这里也提到了一个细节，也就是 插入插槽内容的子组件：

举例来说

假设我们有父组件`parent-comp`：

子组件 `slot-comp`：

组件中含有 `slot` 的更新 ，是属于比较特殊的场景。

这里的 `msg`属性在进行依赖收集的时候，收集到的是 `arent-comp`的\`渲染watcher。（至于为什么，你看一下它所在的渲染上下文就懂了。）

那么我们想象 `msg` 此时更新了，

这个组件在更新的时候，遇到了一个子组件 `slot-comp`，按照 `Vue` 的精确更新策略来说，子组件是不会重新渲染的。

但是在源码内部，它做了一个判断，在执行 `slot-comp` 的 `prepatch` 这个hook的时候，会执行 `updateChildComponent` 逻辑，在这个函数内部会发现它有 `slot` 元素。

prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
        
        const options = vnode.componentOptions
        // 注意 这个child就是 slot-comp 组件的 vm 实例，也就是咱们平常用的 this
        const child = vnode.componentInstance = oldVnode.componentInstance
        updateChildComponent(
          child,
          options.propsData, // updated props
          options.listeners, // updated listeners
          vnode, // new parent vnode
          options.children // new children
        )
      },

在 `updateChildComponent`内部

const hasChildren = !!(
        // 这玩意就是 slot 元素
        renderChildren ||               // has new static slots
        vm.$options._renderChildren ||  // has old static slots
        parentVnode.data.scopedSlots || // has new scoped slots
        vm.$scopedSlots !== emptyObject // has old scoped slots
      )

然后下面走一个判断

if (hasChildren) {
        
       vm.$slots = resolveSlots(renderChildren, parentVnode.context)
       vm.$forceUpdate()
    }

这里调用了 `slot-comp` 组件vm实例上的 `$forceUpdate`，那么它所触发的`渲染watcher`就是属于`slot-comp`的`渲染watcher`了。

总结来说，这次 `msg` 的更新不光触发了 `parent-comp` 的重渲染，也进一步的触发了拥有slot的子组件 `slot-comp` 的重渲染。

它也只是触发了两层渲染，如果 `slot-comp` 内部又渲染了其他组件 `slot-child`，那么此时它是不会进行递归更新的。（只要 `slot-child` 组件不要再有 `slot`了）。

比起 React 的递归更新，是不是还是好上很多呢？