React Hooks - Что происходит под капотом?

Question

Я пробовал React Hooks, и они, кажется, упрощают такие вещи, как сохранение состояния.Тем не менее, они, кажется, делают много вещей с помощью магии, и я не могу найти хорошую статью о том, как они на самом деле работают.

Первое, что кажется магическим, это то, как вызывать такую ​​функцию, как useState ()вызывает повторный рендеринг вашего функционального компонента каждый раз, когда вы вызываете метод setXXX, который он возвращает?

Как что-то вроде useEffect () подделывает componentDidMount, когда функциональные компоненты даже не имеют возможности запускать код в Mount/ Unmount?

Как useContext () фактически получает доступ к контексту и как он вообще знает, какой компонент его вызывает?

И это даже не начинает охватывать всеСторонние хуки, которые уже появляются, как useDataLoader, который позволяет вам использовать следующее ...

const { data, error, loading, retry } = useDataLoader(getData, id)

Как данные, ошибки, загрузка и повторные попытки визуализируют ваш компонент при их изменении?

Извините, много вопросов, но я думаю, что большинство из них можно суммировать в одном вопросе:

Как работает функция b?Неужели хук фактически получает доступ к функциональному компоненту / компоненту без сохранения состояния, который его вызывает, чтобы он мог запоминать вещи между повторными визуализациями и инициировать повторную визуализацию с новыми данными?

Answer 1

Дэн Абрамов создал пост в блоге всего пару дней назад, который освещает это:

https://overreacted.io/how-does-setstate-know-what-to-do/

Вторая половина специально посвящена деталям, касающимся хуков, таких как useState.

Answer 2

React hook использует скрытое состояние компонента, оно хранится внутри волокна , волокно - это объект, который соответствует экземпляру компонента (в более широком смысле, потому что функциональные компоненты не создают экземпляры).как компоненты класса).

Это средство рендеринга React, которое предоставляет ловушке доступ к соответствующему контексту, состоянию и т. д., и, кстати, это средство визуализации React, которое вызывает функцию компонента.Таким образом, он может связать экземпляр компонента с функциями-ловушками, которые вызываются внутри функции компонента.

Этот фрагмент объясняет, как он работает:

let currentlyRenderedCompInstance;
const compStates = new Map(); // maps component instances to their states
const compInstances = new Map(); // maps component functions to instances

function useState(initialState) {
  if (!compStates.has(currentlyRenderedCompInstance))
    compStates.set(currentlyRenderedCompInstance, initialState);

  return [
    compStates.get(currentlyRenderedCompInstance) // state
    val => compStates.set(currentlyRenderedCompInstance, val) // state setter
  ];
}

function render(comp, props) {
  const compInstanceToken = Symbol('Renderer token for ' + comp.name);

  if (!compInstances.has(comp))
    compInstances.set(comp, new Set());

  compInstances.get(comp).add(compInstanceToken);

  currentlyRenderedCompInstance = compInstanceToken;

  return { 
    instance: compInstanceToken,
    children: comp(props)
  };
}

Аналогично тому, как useState может получить доступ к отображаемому в данный момент компонентутокен экземпляра через currentlyRenderedCompInstance, другие встроенные хуки также могут делать это и поддерживать состояние для этого экземпляра компонента.