Eingehende Analyse des Quellcodes von React Hooks

Autor: JD Einzelhandel Zheng Bingyi

Vorwort

React Hooksist Reacteine neue Funktion, die in 16.8 eingeführt wurde und die es ermöglicht, stateund andere React-Funktionen in Funktionskomponenten zu verwenden, ohne Klassenkomponenten verwenden zu müssen. Hookssind ein sehr wichtiges Konzept, da sie eine einfachere und verständlichere ReactEntwicklungserfahrung bieten.

React HooksDer Kernquellcode besteht hauptsächlich aus zwei Teilen: Reactdem internen HookManager und einer Reihe voreingestellter HookFunktionen .

Sehen wir uns zunächst den Manager Reactim Inneren an . HookDieser Manager ist Reactein wichtiger interner Mechanismus, der dafür verantwortlich ist, alles in der Komponente zu verwalten Hookund sicherzustellen, dass sie während des Renderns der Komponente in der richtigen Reihenfolge aufgerufen werden.

Interner Hook-Manager

Beispiel:

const Hook = {
  queue: [],
  current: null,
};

function useState(initialState) {
  const state = Hook.current[Hook.queue.length];
  if (!state) {
    Hook.queue.push({
      state: typeof initialState === 'function' ? initialState() : initialState,
      setState(value) {
        this.state = value;
        render();
      },
    });
  }
  return [state.state, state.setState.bind(state)];
}

function useHook(callback) {
  Hook.current = {
    __proto__: Hook.current,
  };
  try {
    callback();
  } finally {
    Hook.current = Hook.current.__proto__;
  }
}

function render() {
  useHook(() => {
    const [count, setCount] = useState(0);
    console.log('count:', count);
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  });
}

render();

In diesem Beispiel Hookhat das Objekt zwei wichtige Eigenschaften: queueund current. queueSpeichern Sie alle HookZustands- und Aktualisierungsfunktionen in der Komponente und currentspeichern Sie eine verknüpfte Liste von Komponenten, die derzeit gerendert werden Hook. useStateund useHookFunktionen sind dafür verantwortlich, einen neuen HookStatus zu erstellen und ihn in der Komponente zu verwenden Hook.

Voreingestellte Hook-Funktion

useState-Hook

Hier ist useState Hookeine Beispielimplementierung von:

function useState(initialState) {
  const hook = updateWorkInProgressHook();
  if (!hook.memoizedState) {
    hook.memoizedState = [
      typeof initialState === 'function' ? initialState() : initialState,
      action => {
        hook.queue.pending = true;
        hook.queue.dispatch = action;
        scheduleWork();
      },
    ];
  }
  return hook.memoizedState;
}

Der obige Code ist implementiert useState Hookund seine Hauptfunktion besteht darin, ein stateArray mit der Aktualisierungsfunktion zurückzugeben, und der Anfangswert des Zustands ist initialState.

In dieser Implementierung updateWorkInProgressHook()wird die Funktion verwendet, um das Faserobjekt der aktuell ausgeführten Funktionskomponente zu erhalten und zu bestimmen, ob es ein entsprechendes gibt hook. Es wird wie folgt implementiert:

function updateWorkInProgressHook() {
  const fiber = getWorkInProgressFiber();
  let hook = fiber.memoizedState;
  if (hook) {
    fiber.memoizedState = hook.next;
    hook.next = null;
  } else {
    hook = {
      memoizedState: null,
      queue: {
        pending: null,
        dispatch: null,
        last: null,
      },
      next: null,
    };
  }
  workInProgressHook = hook;
  return hook;
}

getWorkInProgressFiber()Die Funktion wird verwendet, um das Objekt der aktuell ausgeführten Funktionskomponente 10 zu erhalten fiber, workInProgressHookund wird verwendet, um das aktuell ausgeführte hookObjekt zu speichern. In einer Funktionskomponente useStateerstellt jeder Aufruf ein neues Hook-Objekt und fügt es der verknüpften Liste fibervon Objekten hinzu hooks. Diese hooksverknüpfte Liste wird über die Eigenschaften fiberdes Objekts verwaltet.memoizedState

Wir müssen auch beachten, dass in useState Hookder Implementierung von jedes hookObjekt ein queueObjekt enthält, um den zu aktualisierenden Zustand und die Aktualisierungsfunktion zu speichern. scheduleWork()Funktionen werden verwendet, um Reactden Scheduler zu benachrichtigen, dass eine Aufgabe ausgeführt werden muss.

Im ReactQuellcode von useStateist die Funktion eigentlich eine useStateImplinterne Funktion namens .

Hier ist useStateImplder Quellcode:

function useStateImpl<S>(initialState: (() => S) | S): [S, Dispatch<SetStateAction<S>>] {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

Es ist ersichtlich, dass useStateImpldie Funktion der Funktion darin besteht, den Strom zu erhalten dispatcherund seine useStateMethode aufzurufen und ein Array zurückzugeben, das erste Element ist der Wert des Zustands und das zweite Element ist eine dispatchFunktion zum Aktualisieren des Zustands. Die Funktion hier resolveDispatcherwird verwendet, um die aktuelle zu erhalten dispatcher, und ihre Implementierung ist wie folgt:

function resolveDispatcher(): Dispatcher {
  const dispatcher = currentlyRenderingFiber?.dispatcher;
  if (dispatcher === undefined) {
    throw new Error('Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)');
  }
  return dispatcher;
}

resolveDispatcherfiberDie Funktion versucht zuerst, die Eigenschaften des Objekts abzurufen , das gerade gerendert wird dispatcher, und wenn sie es nicht bekommen kann, sagt sie

Wenn sich die Komponente derzeit nicht im Rendering-Prozess befindet, wird ein Fehler ausgegeben.

Lassen Sie uns abschließend einen Blick darauf werfen, wie die Methode useStatein einer bestimmten Implementierung implementiert wird. dispatcherwir useReducernehmen

dispatcherEs wird beispielsweise wie folgt implementiert:

export function useReducer<S, A>(
  reducer: (prevState: S, action: A) => S,
  initialState: S,
  initialAction?: A,
): [S, Dispatch<A>] {
  const [dispatch, currentState] = updateReducer<S, A>(
    reducer,
    // $FlowFixMe: Flow doesn't like mixed types
    [initialState, initialAction],
    // $FlowFixMe: Flow doesn't like mixed types
    reducer === basicStateReducer ? basicStateReducer : updateStateReducer,
  );
  return [currentState, dispatch];
}

Wie Sie sehen können, useReducerruft die Methode tatsächlich eine updateReducerFunktion namens auf, die ein dispatchArray zurückgibt, das den aktuellen Zustand und die aktuelle Funktion enthält. updateReducerDie Implementierung von ist komplizierter und erfordert viele Details, daher werde ich sie hier nicht vorstellen.

useEffect-Hook

useEffectIst eine Funktion, Reactdie häufig in Komponenten verwendet wird , um Nebeneffektoperationen in Komponenten auszuführen, wie z. B. den Zugriff auf Remotedaten, das Hinzufügen/Entfernen von Ereignis-Listenern, manuelle Operationen usw. Die Kernfunktion von besteht darin, die Callback-Funktion asynchron auszuführen, nachdem der Rendering-Prozess der Komponente beendet ist, und ihre Implementierung umfasst den asynchronen Rendering-Mechanismus in React.HookDOMuseEffect

Das Folgende ist eine Beispielimplementierung von useEffect Hook:

function useEffect(callback, dependencies) {
  // 通过调用 useLayoutEffect 或者 useEffect 方法来获取当前的渲染批次
  const batch = useContext(BatchContext);

  // 根据当前的渲染批次判断是否需要执行回调函数
  if (shouldFireEffect(batch, dependencies)) {
    callback();
  }

  // 在组件被卸载时清除当前 effect 的状态信息
  return () => clearEffect(batch);
}

In diesem Beispiel useEffectwerden zwei Parameter empfangen: eine Callback-Funktion und ein Array von Abhängigkeiten. Wenn sich ein Wert im Abhängigkeits-Array ändert,

ReactuseEffectDie übergebene Callback-Funktion wird beim nächsten Rendern erneut ausgeführt .

useEffectDie Implementierung der Funktion hängt hauptsächlich vom Reactasynchronen Rendering-Mechanismus in ab. Wenn eine Komponente erneut gerendert werden muss, werden Reactalle stateAktualisierungsvorgänge einer Warteschlange hinzugefügt, und diese Aktualisierungsvorgänge werden asynchron nach dem Ende des aktuellen Rendering-Stapels ausgeführt, wodurch mehrere aufeinanderfolgende Aktualisierungsvorgänge im selben Rendering-Stapel vermieden werden.

In useEffectder Funktion useContext(BatchContext)holen wir uns durch Aufruf der Methode den aktuellen Rendering-Batch und shouldFireEffectbeurteilen, ob die Callback-Funktion entsprechend der Methode ausgeführt werden muss. Nachdem die Callback-Funktion ausgeführt wurde, müssen wir clearEffectMethoden verwenden, um die aktuellen effectStatusinformationen zu löschen, um zu vermeiden, dass nachfolgende Rendering-Batches beeinträchtigt werden.

Zusammenfassen

Im Allgemeinen React Hooksist das Implementierungsprinzip des Systems nicht kompliziert, es hängt hauptsächlich von Reactder internen fiberDatenstruktur und dem Planungssystem ab, um durch diese Mechanismen die Verwaltung und Aktualisierung des Komponentenzustands zu realisieren. HooksEs erlaubt uns, Zustands- und andere Merkmale in Funktionskomponenten zu verwenden React, wodurch Funktionskomponenten mit Klassenkomponenten vergleichbar werden.

Neben useState, useEffectetc. gibt es hooknoch andere häufig verwendete . Ihre Implementierungsprinzipien sind im Wesentlichen ähnlich, und sie alle verwenden die Architektur, um Funktionen wie Zustandsverwaltung und Lifecycle-Hooks zu implementieren.ReactuseContextHookfiber

Das Obige sind hookeinfache Implementierungsbeispiele, sie sind nicht Reactdie eigentlichen Codes, die in verwendet werden, aber sie können uns helfen, hookdie Kernimplementierung besser zu verstehen.

{{o.name}}

{{m.name}}