solid.js響應(yīng)式createSignal源碼分析

這篇文章主要介紹“solid.js響應(yīng)式createSignal源碼分析”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“solid.js響應(yīng)式createSignal源碼分析”文章能幫助大家解決問(wèn)題。

正文

createSignal 用來(lái)創(chuàng)建響應(yīng)式數(shù)據(jù)，它可以跟蹤單個(gè)值的變化。

solid.js 的響應(yīng)式實(shí)現(xiàn)參考了 S.js，它是一個(gè)體積超小的 reactive 庫(kù)，支持自動(dòng)收集依賴和簡(jiǎn)單的響應(yīng)式編程。

createSignal

createSignal

首先我們來(lái)看下 createSignal 的聲明：

// packages/solid/src/reactive/signal.ts
export interface BaseOptions {
  name?: string;
}
export interface EffectOptions extends BaseOptions {}
export interface MemoOptions<T> extends EffectOptions {
  equals?: false | ((prev: T, next: T) => boolean);
}
export type Accessor<T> = () => T;
export type Setter<T> = (undefined extends T ? () => undefined : {}) &
  (<U extends T>(value: (prev: T) => U) => U) &
  (<U extends T>(value: Exclude<U, Function>) => U) &
  (<U extends T>(value: Exclude<U, Function> | ((prev: T) => U)) => U);

// packages/solid/src/reactive/signal.ts
export type Signal<T> = [get: Accessor<T>, set: Setter<T>];
export interface SignalOptions<T> extends MemoOptions<T> {
  internal?: boolean;
}
export function createSignal<T>(): Signal<T | undefined>;
export function createSignal<T>(value: T, options?: SignalOptions<T>): Signal<T>;

可以看到 createSignal 支持兩個(gè)參數(shù)，分別是 value 和 options，然后返回一個(gè)包含 setter 和 getter 的數(shù)組。

參數(shù)：

• value：初始值，默認(rèn)值為 undefiend

• options

• equals：自定義比較器，用于新舊值比較或觸發(fā)強(qiáng)制更新，允許傳遞函數(shù)或者 false；

• internal（可選）：標(biāo)識(shí)是否為內(nèi)置屬性，應(yīng)用于開(kāi)發(fā)環(huán)境，生產(chǎn)環(huán)境會(huì)移除掉相關(guān)邏輯；

• name（可選）：自定義屬性對(duì)象名稱，應(yīng)用于開(kāi)發(fā)環(huán)境，生產(chǎn)環(huán)境會(huì)移除掉相關(guān)邏輯。

返回值：

• getter：返回當(dāng)前值，以函數(shù)形式調(diào)用

• 自動(dòng)進(jìn)行依賴收集。例如在 createEffect 中調(diào)用 getter， state 對(duì)象會(huì)與 effect 建立依賴關(guān)系。

• setter：設(shè)置值，以函數(shù)形式調(diào)用

• 如果存在依賴當(dāng)前 state 對(duì)象的觀察者，循環(huán)執(zhí)行觀察者數(shù)組。

了解 createSignal 聲明之后，下面我們來(lái)看下具體實(shí)現(xiàn)。

// packages/solid/src/reactive/signal.ts
export function createSignal<T>(value?: T, options?: SignalOptions<T>): Signal<T | undefined> {
  options = options ? Object.assign({}, signalOptions, options) : signalOptions;
  const s: SignalState<T> = {
    value,
    observers: null,
    observerSlots: null,
    comparator: options.equals || undefined
  };
  if ("_SOLID_DEV_" && !options.internal)
    s.name = registerGraph(options.name || hashValue(value), s as { value: unknown });
  const setter: Setter<T | undefined> = (value?: unknown) => {
    if (typeof value === "function") {
      if (Transition && Transition.running && Transition.sources.has(s)) value = value(s.tValue);
      else value = value(s.value);
    }
    return writeSignal(s, value);
  };
  return [readSignal.bind(s), setter];
}

如果用戶傳入 options，會(huì)對(duì) options 和默認(rèn)的 options 進(jìn)行合并，否則使用默認(rèn) options。

// packages/solid/src/reactive/signal.ts
export const equalFn = <T>(a: T, b: T) => a === b;
const signalOptions = { equals: equalFn };

默認(rèn)配置只有一個(gè) equals 屬性，值為 equalFn ，用于比較兩個(gè)值是否相同。

由于這里比較的是引用地址，所以當(dāng)你改變一個(gè)對(duì)象的某個(gè)屬性，重新賦值時(shí)，相關(guān)訂閱并不會(huì)被觸發(fā)，所以這時(shí)我們可以在傳入的 options 配置中配置 equals 為 false 或者自定義其他比較邏輯。

例如下面的案例：

const [object, setObject] = createSignal({ count: 0 });
createEffect(() => {
  console.log(object());
});
object().count = 2;
setObject(object);
setObject(current => {
  current.count += 1;
  current.updated = new Date();
  return current;
});
// { count: 0 }

上述代碼在運(yùn)行時(shí) effect 中代碼只會(huì)觸發(fā)一次，這可能與我們的預(yù)期不符，所以我們可以傳入自定義 options。

const [object, setObject] = createSignal({ count: 0 }, { equals: false });
// { count: 0 }
// { count: 2 }
// { count: 3, updated: 2022-09-11T08:21:44.258Z }

當(dāng)我們?cè)O(shè)置 equals 屬性為 false，effect 就會(huì)被觸發(fā) 3 次。

除此之外，我們還可以使用該配置作為觸發(fā)器來(lái)使用，這里就不展開(kāi)闡述了。感興趣可以查看官方提供的案例，createSignal。

下面讓我們繼續(xù)查看代碼：

// packages/solid/src/reactive/signal.ts
export interface SignalState<T> {
  value?: T;
  observers: Computation<any>[] | null;
  observerSlots: number[] | null;
  tValue?: T;
  comparator?: (prev: T, next: T) => boolean;
  name?: string;
}
export function createSignal<T>(value?: T, options?: SignalOptions<T>): Signal<T | undefined> {
  options = options ? Object.assign({}, signalOptions, options) : signalOptions;
  const s: SignalState<T> = {
    value,
    observers: null,
    observerSlots: null,
    comparator: options.equals || undefined
  };
  if ("_SOLID_DEV_" && !options.internal)
    s.name = registerGraph(options.name || hashValue(value), s as { value: unknown });
  const setter: Setter<T | undefined> = (value?: unknown) => {
    if (typeof value === "function") {
      if (Transition && Transition.running && Transition.sources.has(s)) value = value(s.tValue);
      else value = value(s.value);
    }
    return writeSignal(s, value);
  };
  return [readSignal.bind(s), setter];
}

在 createSignal 定義了 s 對(duì)象，它有四個(gè)屬性，分別是：

• value：傳入的值

• observers：觀察者數(shù)組

• observerSlots：觀察者對(duì)象在數(shù)組的位置

• comparator：比較器

// packages/solid/src/reactive/signal.ts
if ("_SOLID_DEV_" && !options.internal)
  s.name = registerGraph(options.name || hashValue(value), s as { value: unknown });

這段代碼為 state 對(duì)象設(shè)置了 name 屬性，不過(guò)它只作用于開(kāi)發(fā)環(huán)境，生產(chǎn)環(huán)境打包時(shí) _SOLID_DEV_ 變量會(huì)被替換為 false，然后會(huì)作為 decode 被移除掉。

// packages/solid/rollup.config.js
export default [
  {
    input: "src/index.ts",
		// ...
    plugins: [
      replace({
        '"_SOLID_DEV_"': false,
        preventAssignment: true,
        delimiters: ["", ""]
      })
    ].concat(plugins)
  }
]

接下來(lái)定義 setter 函數(shù)：首先會(huì)對(duì) value 的值進(jìn)行判斷，如果傳遞的 setter 是一個(gè) 函數(shù)：

• 如果發(fā)現(xiàn) Transition 存在，并且 Transition.sources 中存在當(dāng)前 state，會(huì)使用 s.tValue 屬性值；

• 如果上述條件不滿足，會(huì)使用當(dāng)前 state 的 value 屬性值。

然后調(diào)用 wrtieSignal，并返回其結(jié)果。

// packages/solid/src/reactive/signal.ts
export function createSignal<T>(value?: T, options?: SignalOptions<T>): Signal<T | undefined> {
 	// ...
  const setter: Setter<T | undefined> = (value?: unknown) => {
    if (typeof value === "function") {
      if (Transition && Transition.running && Transition.sources.has(s)) value = value(s.tValue);
      else value = value(s.value);
    }
    return writeSignal(s, value);
  };
  return [readSignal.bind(s), setter];
}

最后返回操作數(shù)組：第一個(gè)參數(shù)為 readSignal 函數(shù)，用來(lái)返回 s 中的 value 值，第二個(gè)參數(shù)就是 setter。

總結(jié)一下，createSignal 首先會(huì)合并用戶 options，其次會(huì)定義 state 對(duì)象，用來(lái)記錄當(dāng)前值和依賴關(guān)系，然后定義 setter 函數(shù)，用來(lái)設(shè)置值，最后返回一個(gè)數(shù)組，分別是 readSignal 函數(shù)和 setter 函數(shù)。

readSignal

readSignal

看完 createSignal 定義，接著我們?cè)賮?lái)看下 readSignal，這個(gè)方法非常重要。solid.js 依賴關(guān)系的建立就發(fā)生在這個(gè)方法中。

// packages/solid/src/reactive/signal.ts
// Internal
export function readSignal(this: SignalState<any> | Memo<any>) {
  const runningTransition = Transition && Transition.running;
  if (
    (this as Memo<any>).sources &&
    ((!runningTransition && (this as Memo<any>).state) ||
      (runningTransition && (this as Memo<any>).tState))
  ) {
    if (
      (!runningTransition && (this as Memo<any>).state === STALE) ||
      (runningTransition && (this as Memo<any>).tState === STALE)
    )
      updateComputation(this as Memo<any>);
    else {
      const updates = Updates;
      Updates = null;
      runUpdates(() => lookUpstream(this as Memo<any>), false);
      Updates = updates;
    }
  }
  if (Listener) {
    const sSlot = this.observers ? this.observers.length : 0;
    if (!Listener.sources) {
      Listener.sources = [this];
      Listener.sourceSlots = [sSlot];
    } else {
      Listener.sources.push(this);
      Listener.sourceSlots!.push(sSlot);
    }
    if (!this.observers) {
      this.observers = [Listener];
      this.observerSlots = [Listener.sources.length - 1];
    } else {
      this.observers.push(Listener);
      this.observerSlots!.push(Listener.sources.length - 1);
    }
  }
  if (runningTransition && Transition!.sources.has(this)) return this.tValue;
  return this.value;
}

函數(shù)內(nèi)部首先判斷是否正在 transition，我們暫時(shí)不需要關(guān)心這段邏輯，直接跳到下面這段邏輯：

// packages/solid/src/reactive/signal.ts
export function readSignal(this: SignalState<any> | Memo<any>) {
	// ...
  if (Listener) {
    const sSlot = this.observers ? this.observers.length : 0;
    if (!Listener.sources) {
      Listener.sources = [this];
      Listener.sourceSlots = [sSlot];
    } else {
      Listener.sources.push(this);
      Listener.sourceSlots!.push(sSlot);
    }
    if (!this.observers) {
      this.observers = [Listener];
      this.observerSlots = [Listener.sources.length - 1];
    } else {
      this.observers.push(Listener);
      this.observerSlots!.push(Listener.sources.length - 1);
    }
  }
  if (runningTransition && Transition!.sources.has(this)) return this.tValue;
  return this.value;
}

首先會(huì)判斷 Listener 是否存在，如果存在才會(huì)執(zhí)行這段代碼。那么這個(gè) Listener 是什么時(shí)候被定義并賦值的呢？

// packages/solid/src/reactive/signal.ts
let Listener: Computation<any> | null = null;
let Updates: Computation<any>[] | null = null;
let Effects: Computation<any>[] | null = null;

Listener 是一個(gè)全局變量，默認(rèn)值是 null。同時(shí)還定義了 Updates、Effectes 數(shù)組，它們都是 Computation 類型。

export type EffectFunction<Prev, Next extends Prev = Prev> = (v: Prev) => Next;
export interface SignalState<T> {
  value?: T;
  observers: Computation<any>[] | null;
  observerSlots: number[] | null;
  tValue?: T;
  comparator?: (prev: T, next: T) => boolean;
  name?: string;
}
export interface Owner {
  owned: Computation<any>[] | null;
  cleanups: (() => void)[] | null;
  owner: Owner | null;
  context: any | null;
  sourceMap?: Record<string, { value: unknown }>;
  name?: string;
  componentName?: string;
}
export interface Computation<Init, Next extends Init = Init> extends Owner {
  fn: EffectFunction<Init, Next>;
  state: number;
  tState?: number;
  sources: SignalState<Next>[] | null;
  sourceSlots: number[] | null;
  value?: Init;
  updatedAt: number | null;
  pure: boolean;
  user?: boolean;
  suspense?: SuspenseContextType;
}

可以看到 Computation 是一個(gè)對(duì)象，定義了很多屬性，基本都不知道啥作用。不過(guò)其中一個(gè) sources 屬性，你是否也感覺(jué)很眼熟？

對(duì)，它就是一個(gè)普通的 signal 對(duì)象，也就是我們調(diào)用 createSignal 方法時(shí)，內(nèi)部創(chuàng)建的 s 對(duì)象。

另外可以看到，上面 SignalState 接口聲明中的 observers 就是一個(gè) Computation 類型的數(shù)組，這時(shí)我們已經(jīng)知道 state 和 computation 互相依賴，并且是多對(duì)多的關(guān)系。

接下來(lái)再回到代碼：

// packages/solid/src/reactive/signal.ts
export function readSignal(this: SignalState<any> | Memo<any>) {
	// ...
  if (Listener) {
    const sSlot = this.observers ? this.observers.length : 0;
    if (!Listener.sources) {
      Listener.sources = [this];
      Listener.sourceSlots = [sSlot];
    } else {
      Listener.sources.push(this);
      Listener.sourceSlots!.push(sSlot);
    }
    if (!this.observers) {
      this.observers = [Listener];
      this.observerSlots = [Listener.sources.length - 1];
    } else {
      this.observers.push(Listener);
      this.observerSlots!.push(Listener.sources.length - 1);
    }
  }
  if (runningTransition && Transition!.sources.has(this)) return this.tValue;
  return this.value;
}

當(dāng) Listener 存在時(shí)，首先會(huì)獲取當(dāng)前 observers 的數(shù)量，如果不存在就是 0，這里的 this 就是 s 對(duì)象。

export function createSignal<T>(value?: T, options?: SignalOptions<T>): Signal<T | undefined> {
	// ...
  return [readSignal.bind(s), setter];
}

接下來(lái)分別判斷 Listener.sources 和 this.observers 是否存在，如果不存在會(huì)創(chuàng)建數(shù)組，并建立依賴關(guān)系。最后將 s 對(duì)象的 value 返回。這里的 value 就是我們調(diào)用 createSignal 傳入的初始值。

不同于 vue 中 通過(guò) Proxy 或者 Object.defineProperty 進(jìn)行屬性劫持，solid.js 中的依賴關(guān)系建立是通過(guò)函數(shù)調(diào)用實(shí)現(xiàn)的，例如在 createEffect 中調(diào)用 getter 函數(shù)，這時(shí)就會(huì)建立依賴關(guān)系。

writeSignal

writeSignal

我們已經(jīng)知道，通過(guò) getter 可以建立 compulation 和 state 之間的依賴關(guān)系。setter 函數(shù)其實(shí)就是用來(lái)觸發(fā)依賴。

export function writeSignal(node: SignalState<any> | Memo<any>, value: any, isComp?: boolean) {
  let current =
    Transition && Transition.running && Transition.sources.has(node) ? node.tValue : node.value;
  if (!node.comparator || !node.comparator(current, value)) {
    if (Transition) {
      const TransitionRunning = Transition.running;
      if (TransitionRunning || (!isComp && Transition.sources.has(node))) {
        Transition.sources.add(node);
        node.tValue = value;
      }
      if (!TransitionRunning) node.value = value;
    } else node.value = value;
    if (node.observers && node.observers.length) {
      runUpdates(() => {
        for (let i = 0; i < node.observers!.length; i += 1) {
          const o = node.observers![i];
          const TransitionRunning = Transition && Transition.running;
          if (TransitionRunning && Transition!.disposed.has(o)) continue;
          if ((TransitionRunning && !o.tState) || (!TransitionRunning && !o.state)) {
            if (o.pure) Updates!.push(o);
            else Effects!.push(o);
            if ((o as Memo<any>).observers) markDownstream(o as Memo<any>);
          }
          if (TransitionRunning) o.tState = STALE;
          else o.state = STALE;
        }
        if (Updates!.length > 10e5) {
          Updates = [];
          if ("_SOLID_DEV_") throw new Error("Potential Infinite Loop Detected.");
          throw new Error();
        }
      }, false);
    }
  }
  return value;
}

writeSignal 接收兩個(gè)參數(shù)，第一個(gè)參數(shù)就是 state 對(duì)象，第二個(gè)參數(shù)就是我們傳入的值。

首先獲取 current，我們暫時(shí)忽略 Transition 相關(guān)的判斷邏輯，這里的 current 就是 state 的值，也就是舊值。

當(dāng) node.comparator 為 false，或者新值和舊值不同時(shí)，才會(huì)進(jìn)行賦值和觸發(fā)更新。

comparator 可以被賦值為 false 或者一個(gè)函數(shù)，默認(rèn) comparator 只會(huì)比較新值和舊值引用是否相同，這里我們后面再去分析。

當(dāng)傳入的值與舊值不同，將新值賦值 node.value。然后判斷 node 是否存在觀察者，如果存在會(huì)循環(huán)遍歷 observers 數(shù)組，根據(jù)不同邏輯放入 Updates 或者 Effects 數(shù)組，不過(guò)最終都會(huì)執(zhí)行 observer 對(duì)象，即 computation 對(duì)象。

案例分析

我們可以通過(guò)源碼調(diào)試的方式對(duì)代碼進(jìn)行分析。

我們來(lái)看下面這個(gè)例子。

const { createSignal } = require("../../solid/dist/solid.cjs");
const [count, setCount] = createSignal(0);
console.log(count());
setCount(count() + 1);
console.log(count());

例子很簡(jiǎn)單，就是創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù)，打印它，改變值后繼續(xù)對(duì)其進(jìn)行打印。

當(dāng) createSignal 函數(shù)被執(zhí)行完畢之前，我們可以可以看到 s 對(duì)象已經(jīng)被創(chuàng)建，value 值為 0，observers 為 null。

接下來(lái)執(zhí)行第一次打印，這時(shí)會(huì)觸發(fā) readSignal 函數(shù)。

可以看到，this 其實(shí)就是 state 對(duì)象，此時(shí) runningTransition 和 Listerner 都為空，什么都不會(huì)執(zhí)行，直接返回 s.value。

當(dāng)執(zhí)行到 setCount(count() + 1) 這段代碼時(shí)，首先會(huì)取到 state 的 value 值，然后再進(jìn)行計(jì)算，并將結(jié)果傳給 setter 函數(shù)，觸發(fā) writeSignal 函數(shù)。

可以看到，current 的值是 0，此時(shí) comparator 肯定是存在的，并且兩個(gè)值并不相等，由于 Transition 不存在，所以會(huì)將 value 賦值給 node.value，此時(shí) state 的 value 值已經(jīng)變?yōu)?1。由于 node.observers` 也不存在，所以會(huì)直接返回傳入的 value ，函數(shù)執(zhí)行完畢。

接下來(lái)執(zhí)行最后一次打印，和之前的過(guò)程一樣，這里只是做了一次取值操作，打印出改變后的結(jié)果 1。

我們還可以調(diào)試其他案例，比如給 createSignal 傳遞第二個(gè)參數(shù)，配置 name 和 equals 屬性然后查看代碼的變化。

關(guān)于“solid.js響應(yīng)式createSignal源碼分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。