リアクティブなソースコード分析

Reactive は、オブジェクトや配列などの参照データ型をバインドして応答性を実現するために使用されます。

リアクティブAPIインターフェース

export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

関連する API には、readonly、createReactiveObject、shallowReadonly、isReactive、toReactive などがあります。ソースコードの操作ロジック: isReadonly を判断し、直接リターンである場合は、createReactiveObject 関数を入力してリアクティブ オブジェクトを作成します。

export function reactive(target: object) {
    
    
  // if trying to observe a readonly proxy, return the readonly version.
  if (isReadonly(target)) {
    
    
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

新しいProxyを使用して、ターゲットを判断して異なるハンドルを実行します(collectionHandlers:baseHandlers)

  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )

ターゲットの種類は次の方法で決定されます。

function targetTypeMap(rawType: string) {
    
    
  switch (rawType) {
    
    
    case 'Object':
    case 'Array':
      return TargetType.COMMON
    case 'Map':
    case 'Set':
    case 'WeakMap':
    case 'WeakSet':
      return TargetType.COLLECTION
    default:
      return TargetType.INVALID
  }
}

ターゲットが Object の場合、baseHandlers ハンドルが実行され、同じディレクトリ内のbaseHandlers.ts 内に、インターセプトして処理するための対応する set メソッドと get メソッドがあります。
createSet メソッドで渡されます

   if (!isReadonly) {
    
    
      track(target, TrackOpTypes.GET, key)
    }

Effects.ts ファイル内の track 関数をトリガーして、trackEffects を実行し、データの変更を操作します。

export function trackEffects(
  dep: Dep,
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
    
    
  let shouldTrack = false
  if (effectTrackDepth <= maxMarkerBits) {
    
    
    if (!newTracked(dep)) {
    
    
      dep.n |= trackOpBit // set newly tracked
      shouldTrack = !wasTracked(dep)
    }
  } else {
    
    
    // Full cleanup mode.
    shouldTrack = !dep.has(activeEffect!)
  }

  if (shouldTrack) {
    
    
    dep.add(activeEffect!)
    activeEffect!.deps.push(dep)
    if (__DEV__ && activeEffect!.onTrack) {
    
    
      activeEffect!.onTrack({
    
    
        effect: activeEffect!,
        ...debuggerEventExtraInfo!
      })
    }
  }
}

前述したように、get メソッドはトリガー メソッドをトリガーしてトリガーの副作用を実行し、データの更新を完了します。最後に、 _mxinの
Reactive の回路図を添付します。

次の記事ではリアクティブアプリケーションについて説明します。