目前来看 Context 是一个非常强大但是很多时候不会直接使用的 api。大多数项目不会直接使用 createContext
然后向下面传递数据,而是采用第三方库(react-redux)。
想想项目中是不是经常会用到 @connect(...)(Comp)
以及 <Provider value={store}><App /></Provider>
?
什么是 Context
Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。
一个顶层数据,想要传递到某些深层组件,通过 props
逐层传递将会非常繁琐,使用 Context 可避免显式地通过组件树逐层传递 props
。
Context 使用示例
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 <Provider value={this.state}>{this.props.children}</Provider>}
}
function Article({ children }) {return (<App><h1>Context</h1><p>hello world</p>{children}</App>)
}
function Paragraph({ color, background }) {return (<div style={{ backgroundColor: background }}><span style={{ color }}>text</span></div>)
}
function TestContext() {return (<Article><Consumer>{state => <Paragraph {...state} />}</Consumer></Article>)
}
export default TestContext
页面呈现出的效果
![](https://i-blog.csdnimg.cn/blog_migrate/9687ea0d482ff08492152920a6a7c09f.png)
打印 ColorContext
、Provider
、Consumer
![](https://i-blog.csdnimg.cn/blog_migrate/c88f9c33c96373348a01980d882dba7c.png)
相关参考视频讲解:进入学习
createContext
// 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 circularProvider: 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;
}
在 react
包里面仅仅是生成了几个对象,比较简单,接下来看看它发挥作用的地方。
在 Consumer
children
的匿名函数里面打 debugger。
![](https://i-blog.csdnimg.cn/blog_migrate/07da2d2f06d3b599399a45c79bcd0b54.png)
查看调用栈
![](https://i-blog.csdnimg.cn/blog_migrate/42603cc1b073079a3f027b57855dc5fe.png)
主要是 newChildren = render(newValue);
,newChildren
是 Consumer
的 children
被调用之后的返回值,render
就是 children
,newValue
是从 Provider
value
属性的赋值。
newProps
![](https://i-blog.csdnimg.cn/blog_migrate/621336143c8433ab476dbee119e9c9bd.png)
newValue
![](https://i-blog.csdnimg.cn/blog_migrate/54728300b1cdabb9c52250f9a7660b4d.png)
接下来看 readContext
的实现
let lastContextDependency: ContextDependency<mixed> | null = null;
let currentlyRenderingFiber: Fiber | null = null;
// 在 prepareToReadContext 函数
currentlyRenderingFiber = workInProgress;
export function readContext<T>(context: ReactContext<T>,observedBits: void | number | boolean,
): T {let contextItem = {context: ((context: any): ReactContext<mixed>),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._currentValuereturn isPrimaryRenderer ? context._currentValue : context._currentValue2;
}
跳过中间,最后一句 return context._currentValue
,而
![](https://i-blog.csdnimg.cn/blog_migrate/2e221fde5f9797bdff661689539bdc7b.png)
就把顶层传下来的 context
的值取到了
context 为什么从上层可以一直往下面传这点现在还没有看懂,后面熟悉跨组件传递的实现之后再写一篇文章解释,囧。
Context 的设计非常特别
Provider
Consumer
是 context 的两个属性。
var context = {?typeof: REACT_CONTEXT_TYPE,_currentValue: defaultValue,_currentValue2: defaultValue,Provider: null,Consumer: null};
Provider
的 ?typeof
是 REACT_PROVIDER_TYPE
,它带有一个 _context
属性,指向的就是 context
本身,也就是自己的儿子有一个属性指向自己!!!
context.Provider = {?typeof: REACT_PROVIDER_TYPE,_context: context};
Consumer
的 ?typeof
是 REACT_CONTEXT_TYPE
,它带也有一个 _context
属性,也是自己的儿子有一个属性指向自己!!!
var Consumer = {?typeof: REACT_CONTEXT_TYPE,_context: context,_calculateChangedBits: context._calculateChangedBits};
所以可以做一个猜想, Provider
的 value 属性赋予的新值肯定通过 _context
属性传到了 context
上,修改了 _currentValue
。同样,Consumer
也是依据 _context
拿到了 context
的 _currentValue
,然后 render(newValue)
执行 children
函数。
useContext
useContext
是 react hooks 提供的一个功能,可以简化 context 值得获取。
下面看使用代码
import React, { useContext, createContext } from 'react'
const NameCtx = createContext({ name: 'yuny' })
function Title() {const { name } = useContext(NameCtx)return <h1># {name}</h1>
}
function App() {return (<NameCtx.Provider value={{ name: 'lxfriday' }}><Title /></NameCtx.Provider>)
}
export default App
我么初始值给的是 {name: 'yuny'}
,实际又重新赋值 {name: 'lxfriday'}
,最终页面显示的是 lxfriday
。
![](https://i-blog.csdnimg.cn/blog_migrate/1ef344c40ce4e39d8b807fcfbfa46662.png)
useContext 相关源码
先看看 react 包中导出的 useContext
/** * useContext * @param Context {ReactContext} createContext 返回的结果 * @param unstable_observedBits {number | boolean | void} 计算新老 context 变化相关的,useContext() second argument is reserved for future* @returns {*} 返回的是 context 的值 */
export function useContext<T>( Context: ReactContext<T>,unstable_observedBits: number | boolean | void, ) {const dispatcher = resolveDispatcher();return dispatcher.useContext(Context, unstable_observedBits);
}
// Invalid hook call. Hooks can only be called inside of the body of a function component.
function resolveDispatcher() {const dispatcher = ReactCurrentDispatcher.current;return dispatcher;
}
/** * Keeps track of the current dispatcher. */
const ReactCurrentDispatcher = {/** * @internal * @type {ReactComponent} */current: (null: null | Dispatcher),
};
看看 Dispatcher
,都是和 React Hooks 相关的。
![](https://i-blog.csdnimg.cn/blog_migrate/edb897a87fb6bf59a1eff424623babcf.png)
再到 react-reconciler/src/ReactFiberHooks.js 中,有 HooksDispatcherOnMountInDEV
和 HooksDispatcherOnMount
,带 InDEV
的应该是在 development
环境会使用到的,不带的是在 `production 会使用到。
const HooksDispatcherOnMount: Dispatcher = {readContext,useCallback: mountCallback,useContext: readContext,useEffect: mountEffect,useImperativeHandle: mountImperativeHandle,useLayoutEffect: mountLayoutEffect,useMemo: mountMemo,useReducer: mountReducer,useRef: mountRef,useState: mountState,useDebugValue: mountDebugValue,
};
HooksDispatcherOnMountInDEV = { // ... useContext<T>(context: ReactContext<T>,observedBits: void | number | boolean,): T {return readContext(context, observedBits);},
}
在上面 useContext
经过 readContext
返回了 context 的值,readContext
在上面有源码介绍。
debugger 查看调用栈
初始的 useContext
![](https://i-blog.csdnimg.cn/blog_migrate/d4b4a2b8069c6a0d982967a2377d0065.png)
在 HooksDispatcherOnMountInDEV
中
![](https://i-blog.csdnimg.cn/blog_migrate/e1cc68904b895c5e7e448fce4ff3a49a.png)
readContext
中
![](https://i-blog.csdnimg.cn/blog_migrate/037364f5e4a7fe0bcfd96782c35cbe92.png)
经过上面源码的详细分析, 大家对 context 的创建和 context 取值应该了解了,context 设计真的非常妙!!
最后
整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。
有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享
部分文档展示:
文章篇幅有限,后面的内容就不一一展示了
有需要的小伙伴,可以点下方卡片免费领取