关于前端:Vue30-reactivity-变成-React-reactivity

背景
我的心路历程
实现
嵌入现有我的项目试验一下
存在危险
结束语

Vue.js 3.0，整个源码是通过 monorepo 的形式保护的，依据性能将不同的模块拆分到 packages 目录上面不同的子目录中：

能够看出绝对于 Vue.js 2.x 的源码组织形式，monorepo 把这些模块拆分到不同的 package 中，每个 package 有各自的 API、类型定义和测试。这样使得模块拆分更细化，职责划分更明确，模块之间的依赖关系也更加明确，开发人员也更容易浏览、了解和更改所有模块源码，进步代码的可维护性。

另外一些 package（比方 reactivity 响应式库）是能够独立于 Vue.js 应用的，这样用户如果只想应用 Vue.js 3.0 的响应式能力，能够独自依赖这个响应式库而不必去依赖整个 Vue.js，减小了援用包的体积大小，而 Vue.js 2 .x 是做不到这一点的。

这个其实说起来有点搞笑，当我有这个想法并实现出这个货色的时候，并且我还在咱们组吹牛了一波，我是这样。

然而，我在知乎、掘金上发现竟然有人曾经玩过了。 ~~本认为发现了新大陆，然而竟然是玩剩下的，只有我还在鼓里~~ 。而后我是这样的。

import {effect, reactive} from '@vue/reactivity';
import {useRef, useEffect, useMemo, useState} from 'react';

// 避免初始化的时候进行
let initUpdate = false;

const useReactive = (initState: any) => {
  // 应用一个状态，这个状态自身是没有用的，只是为了做强制更新
  const [, forceUpdate] = useState(0);
  // 保留响应式对象（useRef 始终保留的的原始对象，避免响应式对象失落）const reactiveState = useRef(initState);
  // 对响应式对象缓存
  const state = useMemo(() => reactive(reactiveState.current), [reactiveState.current]);
  // 监听响应式对象的扭转
  useEffect(() => {effect(() => {for (const i in state) {
        // 拜访触发依赖收集
        state[i];
      }
      // 强制更新，利用后面无用的状态
      if (initUpdate) {forceUpdate((num) => num + 1);
      }
      if (!initUpdate) initUpdate = true;
    });
  }, [state]);
  return state;
};

export default useReactive;

测试源代码看这里。
实现很简略，这里有几个外围点须要留神。

接管一个一般对象而后返回该一般对象的响应式代理。等同于 2.x 的 Vue.observable()。
响应式转换是“深层的”：会影响对象外部所有嵌套的属性。基于 ES2015 的 Proxy 实现，返回的代理对象不等于原始对象。倡议仅应用代理对象而防止依赖原始对象。

effect 作为 reactive 的外围，次要负责收集依赖，更新依赖。

for (const i in state) {
  // 拜访触发依赖收集
  state[i];
}

在底层源码中，track 收集依赖 (get 操作)。

/**
 * @description: 
 * @param {target} 指标对象 
 * @param {type} 收集的类型,  函数的定义在下方 
 * @param {key} 触发 track 的 object 的 key 
 */
export function track(target: object, type: TrackOpTypes, key: unknown) {
  // activeEffect 为空代表没有依赖，间接 return
  if (!shouldTrack || activeEffect === undefined) {return}

  // targetMap 依赖管理中心，用于收集依赖和触发依赖
  // 查看 targetMap 中有没有以后 target
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    // 没有则新建一个
    targetMap.set(target, (depsMap = new Map()))
  }

  // deps 来收集依赖函数，当监听的 key 值发生变化时，触发 dep 中的依赖函数
  let dep = depsMap.get(key)
  if (!dep) {depsMap.set(key, (dep = new Set()))
  }
  if (!dep.has(activeEffect)) {dep.add(activeEffect)
    activeEffect.deps.push(dep)
    // 开发环境会触发 onTrack, 仅用于调试
    if (__DEV__ && activeEffect.options.onTrack) {
      activeEffect.options.onTrack({
        effect: activeEffect,
        target,
        type,
        key
      })
    }
  }
}

//  get、has、iterate 三种类型的读取对象会触发 track
export const enum TrackOpTypes {
  GET = 'get',
  HAS = 'has',
  ITERATE = 'iterate'
}

如果你认真的去看，其实这代码是存在危险点的。
代码中咱们应用 for 循环 get 属性，进行依赖的收集，这恰好就是问题，每次更新状态都会去触发 for 循环，你懂的，如果存在大量的 key 就无奈防止的带来了性能问题。

在 Vue2.0 会用一个__ob__属性进行标识是否被依赖收集过，如果被收集过，就不会再被收集！vue3 收集形式和 2.0 有点区别，vue3.0 当援用了才会被收集，比如说当咱们调用 this.obj ,obj 上面的属性才会被收集，如果被收集过，不会被收集，然而对于没有援用过的，就会被再收集。而且采纳了 WeakMap, 一旦不须要，就会自行隐没。好吧，咱们回到最开始的问题，咱们在 react jsx 援用的属性不能像 vue3 解决 template 模版一样，能够收集依赖，所以第一次更新之后，响应式对象不须要了被回收了，所以第二次就无奈更新了，所以每一次须要我先遍历一次。

如果文章中什么不对或者写的不好的中央，请大家多多斧正，谢谢！码字不易，点个赞加个关注吧！

笔者在「深圳虾皮」，一家口碑还不错的东南亚电商公司，2021 大量招人，机会多多！快来退出咱们吧！

当初有想法，还是当前有想法的同学，都能够加我微信 [stone—999]！内推你退出咱们的小家庭！

https://vue3js.cn/vue-composi…
https://juejin.cn/post/694783…

关于前端:Vue30-reactivity-变成-React-reactivity

目录

1. 背景

2. 我的心路历程

3. 实现

外围 1：reactive

外围 2：effect

外围 3：触发依赖收集

4. 嵌入现有我的项目试验一下

之前定义状态

之前更新状态

当初定义状态

当初更新状态

5. 危险点

6. 结束语

题外话

参考