React context как это работает

Question

Learning React, и любопытно узнать, как приведенный ниже способ использования контекста работает за кулисами?

  static contextType = MyContext;
  render() {
    let value = this.context;
    /* render something based on the value */
  }
}

Как this.context автоматически настраивается путем объявления static contextType?

Answer 1

Код, который обрабатывает это, можно найти здесь: https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberClassComponent.new.js#L531

Короче говоря, они проверяют, существует ли ctor.contextType (где ctor - конструктор для компонента) . Если это так, они читают значение в контексте, а затем вызывают конструктор с этим значением.

const contextType = ctor.contextType;
//...
if (typeof contextType === 'object' && contextType !== null) {
    context = readContext((contextType: any));
}
//...
const instance = new ctor(props, context);