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 相关文章推荐
JavaScript 动态改变图片大小
Jun 11 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
js实现表格字段排序
Feb 19 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
详解JVM系列之内存模型
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
一文搞懂redux在react中的初步用法
Jun 09 #Javascript
深入详解JS函数的柯里化
Jun 09 #Javascript
javascript canvas实现雨滴效果
用JS实现飞机大战小游戏
Jun 09 #Javascript
原生JS实现飞机大战小游戏
You might like
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
一段批量给页面上的控件赋值js
2010/06/19 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
Vue官网todoMVC示例代码
2018/01/29 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
Python中使用中文的方法
2011/02/19 Python
UGG英国官方网站:UGG UK
2018/02/08 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
企业治理工作自我评价
2013/09/26 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
个人培训自我鉴定
2014/03/28 职场文书
小学生安全演讲稿
2014/04/25 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
挂职个人工作总结
2015/03/05 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
服装店员工管理制度
2015/08/07 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
完美解决golang go get私有仓库的问题
2021/05/05 Golang