Question

学习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);

反应上下文如何工作

1 个答案: