React中的Context定义和目的是什么,怎么应用
Admin 2022-06-06 群英技术资�
Context 提供了一种在组件之间共享数据的方式,而不必显式地通过组件树的逐层传� props�
应用场景 哪些数据会需要共享?
Context 设计目的是为了共享那些对于一个组件树而言�**“全局”的数据**,例如当前认证的用户、主题或首选语言�
1. 创建并初始化Context
const MyContext = createContex(defaultValue);
创建一� Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件,这个组件会从组件树中离自身最近的那个匹配� Provider
中读取到当前� context 值�
2. 订阅Context
<MyContext.Provider value={/* 某个� */}>
Provider 接收一� value
属性,传递给消费组件。一� Provider 可以和多个消费组件有对应关系。多� Provider 也可以嵌套使用,里层的会覆盖外层的数据�
这里有两个相关的概念
useContext()
来使用或消费Context的组件。这些组件通过useContext()获取、使用Context的最新值�3. 使用Conext
3.1 React组件中使�
const value = useContext(MyContext);
在消费组件中引用Context。value会从组件树中离自身最近的那个匹配的Provider中读取到当前的Context值�
3.2 纯函数式组件中使�
在纯函数式的组件中,可以使用Consumer
来引用context的值。如果没有上层对应的Provider,value等同于传递给createContext()
�defaultValue
.
<MyContext.Consumer> {value => /* 基于 context 值进行渲�*/} </MyContext.Consumer>
4. Context的更�
4.1 自上而下更新Context
自上而下更新指的是更新Provider的value值。当 Provider � value
值发生变化时,它内部的所有消费组件内通过useContext
获取到的值会自动更新,并触发重新渲染�
//App.js // .... export default function App() { //... // const {contextValue, setContextValue} = React.useState(initialValue); // function to update the context value function updateContext(newValue) { // ... // 更新contextValue, ConsumerComponent1, ConsumerComponent2, ConsumerComponent3, ConsumerComponent11都会触发重新渲染� setContextValue(newValue) } ... return ( <App> <MyContext.Provider value={contextValue}> <ConsumerComponent1> <ConsumerComponent11> // .... </ComsumerComponent11> </ConsumerComponent1> <ConsumerComponent2 /> <ConsumerComponent3 /> </MyContext.Provider> </App> ); }
4.2 自下而上(从消费组件)更新Context
在某些情况下,需要在某个消费组件内更�context
,并且适配到整个程序。比如通过应用程序�setting
组件修改UI风格� 这时就需要通过回调将更新一层层传递到对应的Provider,更新Provide对应�value
,从而触发所有相关消费组件的更新�
// app.js export default function App() { ... const {contextValue, setContextValue} = React.useState(initialValue); // function to update the context value function updateContext(newValue) { // ... // 更新contextValue, ConsumerComponent1, ConsumerComponent2, ConsumerComponent3, ConsumerComponent11都会触发重新渲染� setContextValue(newValue) } ... return ( <App> <MyContext.Provider value={contextValue}> <ConsumerComponent1> <ConsumerComponent11 updateValue={updateContext}> // 通过回调形式的props, 在ConsumerComponent11中更新contextValue, 因为contextValue属于最顶层的Provider的值,所以也会触发ConsumerComponent1, ConsumerComponent2, ConsumerComponent3重新渲染� </ComsumerComponent11> </ConsumerComponent1> <ConsumerComponent2 /> <ConsumerComponent3 /> </MyContext.Provider> </App> ); }
4.3 Provider嵌套
在一些情况下,可能会出现同一个Context的provider嵌套的情况,这时候可以理解为两个Context。不同的是,
... const {contextValue, setContextValue} = React.useState(initialValue); // function to update the context value function updateContext(newValue) { // ... // 更新contextValue, ConsumerComponent1, ConsumerComponent2, ConsumerComponent3, ConsumerComponent11都会触发重新渲染� setContextValue(newValue) } ... return ( <App> <MyContext.Provider value={contextValue}> <ConsumerComponent1> <ConsumerComponent11 /> </ConsumerComponent1> <ConsumerComponent2> ... // 如果只希望更新ComsumerComponent21, ComsumerComponent22中的� const localContextValue = useContext(MyContext); // 从上一层Provider中获取当前� const {tempContextValue, setTempContextValue} = React.useState(localContextValue); function updateTempContext(newValue) { // 这里更新以后只会触发ConsumerComponent21和ConsumerComponent22的重新渲� setTempContextValue(newValue); } // 这里新建Provider,在ConsumerComponent21和ConsumerComponent22之间共享数据� <MyContext.Provider value={tempValue}> <ConsumerComponent21> // 在ConsumerComponent21中通过useContext(MyContext)订阅 // 获取到的值为离自身最近的那个匹配的Provider中读取到的Context�,即tempValue </ConsumerComponent21> <ConsumerComponent22> </ConsumerComponent22> </MyContext.Provider value={contextValue}> </ConsumerComponent2> <ConsumerComponent3 /> </MyContext.Provider> </App> );
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
three.js镜头追踪移动的实现难点有哪些?在实际项目的操作过程或是学习过程中,不少人都会遇到这样的问题,接下来就让小编带大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
SVG是一种图像文件格式,意思为可缩放的矢量图形,是现在比较流行的图像文件格式之一,使用SVG格式我们就能够直接使用代码来描绘图像。那么我们如果要在vue中引入svg图标,要怎么做呢�
这篇文章主要为大家详细介绍了Vue.js实现点击左右按钮图片切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
最近开发React 使用tsx编写,没有找到什么好的随机生成验证码的插件,自己就手撸了一个,废话不多话,直接上代码�
这篇文章主要介绍了有关vue 组件切换,动态组�,组件缓存,在组件化开发模式下,我们会把整个项目拆分成很多组件,然后按照合理的方式组织起来,达到预期效果,下面来看看文章的详细内�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078