当前位置: 首页> 财经> 创投人物 > React useContext源码分析

React useContext源码分析

时间:2025/7/12 7:08:05来源:https://blog.csdn.net/hawk2014bj/article/details/139355692 浏览次数:0次

React 框架中 useContext Hook 用于数据的传递,组件的数据传递有几种方式,通过 props、状态管理 和 useContext。本文将讲述useContext 在 React 是如何工作的,创建一个简单的 Context 例子并根据源码进行 Debug:

创建 context

创建 Context,并通过 Conext.Provider 进行注册:

export  const MyContext = createContext(null);root.render(<MyContext.Provider value="100"><React.StrictMode><App /></React.StrictMode></MyContext.Provider>
);

使用Context

需要使用 context 的位置,调用 useContext

 const result = useContext(MyContext)

React 是怎么实现 Provider 和 Consumer呢?因为只有 Provider 的子组件可以获取 Context 的值,就需要借助 Fiber Stack结构,确保只有Provider 节点下的子节点才能够消费、看到 Provider 的值。

createContext

创建 Context 是,同时初始化 Provider,Provider 的 elementType 为 REACT_PROVIDER_TYPE。
在这里插入图片描述

将 Provider FiberNode 添加到 Stack 中
在这里插入图片描述
context currentValue 赋值
在这里插入图片描述
将当前Provider Node 插入到 FiberStack 中
在这里插入图片描述

useContext

useContext 用于获取 Context 的值,调用 readContext 并返回当前值
在这里插入图片描述

总结

useContext 的整体流程,Provider 赋值,useContext 取值,通过 Stack 进行管理,只有子节点才能看到 Provider 的值。

关键字:React useContext源码分析

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: