react的context状态树怎么使用

简介: react的context状态树怎么使用

首先第一步 我们要从react包中导出 createContext来创建一个context实例对象

这个context实例对象可以设置默认值 设置后如果在父组件不包裹provider组件的情况下会返回默认值

然后我们从实例对象中导出Provider和Consumer两个组件并且把实例对象Mycontext一起导出去

7e4295d6fa7a4fcbaa2cecc0e6ac913c.png

在父组件的位置通过Provider包裹 并且Provider有一个value属性值 这个值就是我们要进行共享的值 如果没有这个包裹 则会显示默认值

0c1d010a005f4647a47f51c68504616a.png

然后父组件中再去嵌套子组件

b04d31cccf0f4eb0abf00d422dd47396.png

context在类组件中的使用:

首先我们引入context创建的实例对象 然后在类组件中有一个静态属性是 static contextType  让他等于我们的实例对象 然后在类组件的内部 直接通过 this.context.值 就可以使用了

b8ed037e86154dabac0671cf59276a7a.png

context函数组件:

我们把Consumer组件导入到函数组件中 然后我们想要在那个位置使用context的值我们就在那块用Consumer组件包裹 然后在内部通过一个箭头函数返回一个jsx即可

21b255cb7d774a5b9d92af29c0e230e3.png

相关文章
|
6天前
|
前端开发 API
React 之 Context 的变迁与背后实现
React 之 Context 的变迁与背后实现
30 0
|
6天前
|
前端开发 JavaScript API
React的Context API:全局状态管理的利器
【4月更文挑战第25天】React的Context API解决了深层组件间状态共享的难题,提供全局状态管理方案。通过`Provider`和`Consumer`组件,或结合`useContext` Hook,实现状态在组件树中的传递。最佳实践包括避免过度使用,分离逻辑,以及在必要时与Redux或MobX结合。Context API简化了数据传递,但需谨慎使用以保持代码清晰。
|
6天前
|
前端开发
深入理解 React 中的 Context(二)useContext、createContext
深入理解 React 中的 Context(二)useContext、createContext
|
6天前
|
前端开发
React中兄弟组件通信和组件跨级传递Context的使用
React中兄弟组件通信和组件跨级传递Context的使用
|
7月前
|
JavaScript 前端开发 容器
React-跨组件通讯-context
React-跨组件通讯-context
31 0
|
9月前
|
前端开发
React的context传值方法介绍
1.在src在创建一个context.js文件
React的context传值方法介绍
|
9月前
|
前端开发
React Context是什么
React Context是什么
|
容器
React-58:Context(组件间进行通信)
React-58:Context(组件间进行通信)
97 0
React-58:Context(组件间进行通信)
|
6天前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
138 0
|
6天前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
49 0

热门文章

最新文章