React中的Context应用场景分析


Posted in Javascript onJune 11, 2021

Context定义和目的

Context 提供了一种在组件之间共享数据的方式,而不必显式地通过组件树的逐层传递 props。

应用场景 哪些数据会需要共享?

Context 设计目的是为了共享那些对于一个组件树而言是**“全局”的数据**,例如当前认证的用户、主题或首选语言。

使用步骤

1. 创建并初始化Context

const MyContext = createContex(defaultValue);

创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件,这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

2. 订阅Context

<MyContext.Provider value={/* 某个值 */}>

Provider 接收一个 value 属性,传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用,里层的会覆盖外层的数据。

这里有两个相关的概念

  • Provider - Context提供者,或Context的订阅者。可以理解为通过Provider为其内部组件订阅了Context值的变动,一旦Context值有变化,就会触发内部组件重新渲染。
  • Comsumer - Context消费者(消费组件),或者叫Context使用者。即在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>
);

官方文档

官方文档请参考下边的基础和高级教程。

Hook API 索引 ? React (reactjs.org)

Context ? React (reactjs.org)

以上就是React中的Context应用场景分析的详细内容,更多关于React中的Context的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
老生常谈js数据类型
Aug 03 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
vue视频播放暂停代码
Nov 08 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
详解JVM系列之内存模型
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
一文搞懂redux在react中的初步用法
Jun 09 #Javascript
深入详解JS函数的柯里化
Jun 09 #Javascript
javascript canvas实现雨滴效果
用JS实现飞机大战小游戏
Jun 09 #Javascript
原生JS实现飞机大战小游戏
You might like
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
python实现爬虫下载美女图片
2015/07/14 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
python中get和post有什么区别
2020/06/19 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
浅析Python的命名空间与作用域
2020/11/25 Python
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
六十岁生日答谢词
2014/01/10 职场文书
小学生读书感言
2014/02/12 职场文书
教师开学感言
2014/02/14 职场文书
学生请假条格式
2014/04/11 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
优秀英文求职信范文
2015/03/19 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL