import React, { Component, createContext, useConText } from 'react' const ColorContext = createContext(null) const { Provider, Consumer } = ColorContext console.log('ColorContext', ColorContext) console.log('Provider', Provider) console.log('Consumer', Consumer) class App extends Component { constructor(props) { super(props) this.state = { color: 'red', background: 'cyan', } } render() { return {this.props.children} } } function Article({ children }) { return ( 
Context
hello world
 {children}  ) } function Paragraph({ color, background }) { return ( 
text
 ) } function TestContext() { return ( 
{state =>}
 ) } export default TestContext 

// createContext 可以让我们实现状态管理 // 还能够解决传递 Props drilling 的问题 // 假如一个子组件需要父组件的一个属性，但是中间间隔了好几层，这就会出现开发和维护的一个成本。这时候就可以通过这个 API 来解决 function createContext(defaultValue, calculateChangedBits) { var context = { ?typeof: REACT_CONTEXT_TYPE, _calculateChangedBits: calculateChangedBits, // As a workaround to support multiple concurrent renderers, we categorize // some renderers as primary and others as secondary. We only expect // there to be two concurrent renderers at most: React Native (primary) and // Fabric (secondary); React DOM (primary) and React ART (secondary). // Secondary renderers store their context values on separate fields. // 以下两个属性是为了适配多平台 _currentValue: defaultValue, _currentValue2: defaultValue, // Used to track how many concurrent renderers this context currently // supports within in a single renderer. Such as parallel server rendering. _threadCount: 0, // These are circular Provider: null, Consumer: null }; // 以下的代码很简单，就是在 context 上挂载 Provider 和 Consumer，让外部去使用 context.Provider = { ?typeof: REACT_PROVIDER_TYPE, _context: context }; var Consumer = { ?typeof: REACT_CONTEXT_TYPE, _context: context, _calculateChangedBits: context._calculateChangedBits }; context.Consumer = Consumer; context._currentRenderer = null; context._currentRenderer2 = null; return context; } 

let lastContextDependency: ContextDependency | null = null; let currentlyRenderingFiber: Fiber | null = null; // 在 prepareToReadContext 函数 currentlyRenderingFiber = workInProgress; export function readContext( context: ReactContext, observedBits: void | number | boolean, ): T { let contextItem = { context: ((context: any): ReactContext), observedBits: resolvedObservedBits, next: null, }; if (lastContextDependency === null) { // This is the first dependency for this component. Create a new list. lastContextDependency = contextItem; currentlyRenderingFiber.contextDependencies = { first: contextItem, expirationTime: NoWork, }; } else { // Append a new context item. lastContextDependency = lastContextDependency.next = contextItem; } } // isPrimaryRenderer 为 true，定义的就是 true // 实际就是一直会返回 context._currentValue return isPrimaryRenderer ? context._currentValue : context._currentValue2; } 

 var context = { ?typeof: REACT_CONTEXT_TYPE, _currentValue: defaultValue, _currentValue2: defaultValue, Provider: null, Consumer: null }; 

 context.Provider = { ?typeof: REACT_PROVIDER_TYPE, _context: context }; 

 var Consumer = { ?typeof: REACT_CONTEXT_TYPE, _context: context, _calculateChangedBits: context._calculateChangedBits }; 

import React, { useContext, createContext } from 'react' const NameCtx = createContext({ name: 'yuny' }) function Title() { const { name } = useContext(NameCtx) return 
# {name}
 } function App() { return (