react中关于Context/Provider/Consumer传参的使用

目录
  • Context/Provider/Consumer传参使用
    • Context
    • 使用context向后代组件传参

Context/Provider/Consumer传参使用

react context这个api很少用到,所以一直不太清楚如何使用,最近在看antd的项目源码时,发现在组件中有类似Template.Comsumer的写法,一时没反应过来,本着碰到不懂得都要追根究底的原则,下面好好学习一下,Context这个api的使用

Context

作用

上下文(Context) 提供了一种通过组件树传递数据的方法，无需在每个级别手动传递 props 属性。

但是我们现在通用的传递数据的做法是使用redux,mobx,应为这些数据管理插件,能更好的对数据做管理已经更新 ,而使用Context只能将部分数据传入,且使用起来比较麻烦,容易造成混乱.

所以一般情况下我们不要使用Context,虽然不太用到但是还是需要学习的,指不定哪天就转正了

如何使用

这里直接就用官方的例子来解释,自己懒得写例子了 = ) !

//创建一个Context 
//light就是传入的默认值 最好传入默认值因为第一次渲染的时候没有默认值可能会导致错误
const ThemeContext = React.createContext('light');
class App extends React.Component {
  render() {
    return (
        //使用Provider设置dark值
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
}
//中间组件
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}
class ThemedButton extends React.Component {
//注册context自动获取当前组件最近的Provider,获取到context的值 ,这种写法是不直接指定context的写法
//可以为类上的 contextType 属性分配由 React.createContext() 创建的 Context 对象。 这允许您使用this.context 使用该 Context 类型 的最近的当前值。
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

指定某个Context的写法

...
class ThemedButton extends React.Component {
 //使用Consumer,获取某个Context的值
  render() {
       return (
      <ThemeContext.Consumer>
          {theme => <Button {...props} theme={theme} />}
      </ThemeContext.Consumer>
    )
  }
}

我们同样希望能够在子组件中对Context的值做改变,这时候就需要用到回调函数

//创建一个Context 
//light就是传入的默认值 最好传入默认值因为第一次渲染的时候没有默认值可能会导致错误
const ThemeContext = React.createContext({theme: 'light',toggle: ()=> {}});
class App extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = () => { //设定toggle方法，会作为context参数传递
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    };
    this.state = {
      theme: themes.light,
      toggle: this.toggle,
    };
  }
  render() {
    return (
       
      <ThemeContext.Provider value={this.state}>
        <Toolbar />
      </ThemeContext.Provider>
    );
}
//中间组件
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}
class ThemedButton extends React.Component {
 //使用Consumer,获取某个Context的值
  render() {
       return (
      <ThemeContext.Consumer>
          {theme => <Button {...props} theme={theme} />}
      </ThemeContext.Consumer>
    )
  }
}

Context的值每次更新的时候，所有作为 Provider(提供者) 后代的 Consumer(使用者) 组件 都将重新渲染。

总的来说Context就是用来传递父子组件之前的状态的api,防止多层组件传递状态的问题,但是因为我们现在都有全局状态管理的插件所以一般用不到, 但是其实在我们写通用组件的时候可能我们不希望污染Redux的状态树,或者让组件依赖于其他状态插件,就可以用到这个功能

使用context向后代组件传参

当我们组件内嵌套多层后代组件的时候用props传参就显得繁琐，且不美观，这时候我们可以用context向后代组件直接传参：

  • 调用React.createContext()创建两个组件（Provider、Consumer）分别用来提供数据和接收数据
  • 使用Provider组件作为提供数据的父节点
  • 给Provider组件设置value属性，需要传递到后代组件中的数据作为value的值
  • 调用Consumer组件接收数据（该组件内部是一个回调函数，形参就是从Provider组件传过来的参数）

代码示例：

class Parent extends React.Component {
    state={
        num:555,
        color:'green'
    }
    render() {
        return (
            <Provider value={this.state.color}>
                <div className="first">
                    <div>第1层</div>
                    <Css />
                    <div>第1层</div>
                </div>
            </Provider>
        )
    }
}
class Css extends React.Component {
    render() {
        return (
            <div className="second">
                <div>第2层</div>
                <Js />
                <div>第2层</div>
            </div>
        )
    }
}
class Js extends React.Component {
    render() {
        return (
            <div className="third">
                <div>第3层</div>
                <Html />
                <div>第3层</div>
            </div>
        )
    }
}
class Html extends React.Component {
    render() {
        return (
            <div className="fourth">
                <div>第4层</div>
                <Consumer>{data=> <span>呼伦贝尔的颜色是{data}</span>}</Consumer>
                <div>第4层</div>
            </div>
        )
    }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于React Context实现一个简单的状态管理的示例代码

    基于React Context实现一个简单的状态管理的示例代码

    目录 前言 封装一个父组件用来包裹其他子组件 子组件如何获取数据呢 class Component 方式 context.Consumer useContext 总结 参考 前言 在大多数情况下,我们开发项目都需要一个状态管理,方便我们在全局共享状态库,在React生态里比较流行的几个库 redux.mobx.recoil 但是对于小项目,我们完全可以自己封装一个状态管理,减少一个包的安装就可以减小打包以后的项目体积. 主要分两步: 封装一个顶层组件提供数据 子组件获取数据和更新数据 封装一个父

  • 详解React中组件之间通信的方式

    详解React中组件之间通信的方式

    一.是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件 而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的,广义上,任何信息的交通都是通信 组件间通信即指组件通过某种方式来传递信息以达到某个目的 二.如何通信 组件传递的方式有很多种,根据传送者和接收者可以分为如下: 父组件向子组件传递 子组件向父组件传

  • React 非父子组件传参的实例代码

    React 是一个用于构建用户界面的 JAVASCRIPT 库. React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. React 特点 1.声明式设计 −React采用声明范式,可以轻松描述应用. 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的

  • react的context和props详解

    react的context和props详解

    目录 一.context 1. 使用场景 2. 使用步骤 3. 总结 二.props深入 1. children 属性 2. props 校验 3. props校验使用步骤 4. props校验约束规则 5. props默认值 总结 一.context 1. 使用场景 设想一个场景,假如我们要给子孙组件传值,应该怎么办呢? 如果使用props一层一层往下 传递的话,特别的繁琐! 更好的办法:使用context来帮助我们跨组件传递数据 2. 使用步骤 调用 React.createContext(

  • react中关于Context/Provider/Consumer传参的使用

    react中关于Context/Provider/Consumer传参的使用

    目录 Context/Provider/Consumer传参使用 Context 使用context向后代组件传参 Context/Provider/Consumer传参使用 react context这个api很少用到,所以一直不太清楚如何使用,最近在看antd的项目源码时,发现在组件中有类似Template.Comsumer的写法,一时没反应过来,本着碰到不懂得都要追根究底的原则,下面好好学习一下,Context这个api的使用 Context 作用 上下文(Context) 提供了一种通过

  • React中的Context应用场景分析

    Context定义和目的 Context 提供了一种在组件之间共享数据的方式,而不必显式地通过组件树的逐层传递 props. 应用场景 哪些数据会需要共享? Context 设计目的是为了共享那些对于一个组件树而言是**"全局"的数据**,例如当前认证的用户.主题或首选语言. 使用步骤 1. 创建并初始化Context const MyContext = createContex(defaultValue); 创建一个 Context 对象.当 React 渲染一个订阅了这个 Cont

  • Feign调用中的两种Header传参方式小结

    目录 Feign调用中的两种Header传参方式 在请求拦截器中统一配置 通过@RequestHeader注解 调用feign接口时,如何往header中添加参数 总结 Feign调用中的两种Header传参方式 在Spring Cloud Netflix栈中,各个微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就必须使用HTTP客户端. 我们可以使用JDK原生的URLConnection.Apache的Http Client.Netty的异步HTTP Client, Spri

  • Java中数组的创建与传参方法(学习小结)

    (一)数组的创建 数组的创建包括两部分:数组的申明与分配内存空间. int score[]=null; //申明一维数组 score=new int[3]; //分配长度为3的空间 数组的申明还有另外一种方式: int[] score=null; //把中括号写在数组名前面 通常,在写代码时,为了方便,我们将两行合并为一行: int score[]=new int score[3]; //将数组申明与分配内存写在一行 (二)传递参数 由于初学java,这里只讨论值传递,不考虑地址传递.主要有3点

  • python中使用ctypes调用so传参设置遇到的问题及解决方法

    问题 近日在做一组声纹聚类时,使用了另一团队同学开发的声纹距离算法.该算法对外提供的是一组so包,需要使用方自己去使用.在python中调用纯so包一般使用ctypes类库,用起来看起来简单但也有不少细节容易犯错.本次使用过程中,就遇到传参的问题. 目标so库中对外export的函数是大致如下的三个函数: void* create_handler(); int extract_feature(void* hander); bool destroy(void* handler); 这三个函数使用起

  • Mybatis中使用万能的Map传参实现

    Mybatis中使用万能的Map传参实现

    在编程中,有可能遇到我们的实体类或者数据库中表的字段或参数过多的情况,那这时候用Map传参是比较理想的选择. Map的特性是键值对应的,只要确定了一个键key,那么值value可以是任何的数据,这样就可以在map内存中存入任何数据. 下面例子演示在mybatis中结合Map实现基本的增删改查 数据库表(fruits)结构: 实体类: package com.pojo.pp1; import java.math.BigDecimal; /** * 简述: *创建实体 * @author:LiYan

  • react中antd Upload手动上传的示例

    react中antd Upload手动上传的示例

    目录 情况介绍 实现方法 1.初始化 2.上传表单和图片 3.图片回显 情况介绍 在antd官方提供的upload组件案例中,都使用了action属性直接上传,唯一手动上传的一个例子(如下图)也不够好用,可能不能满足项目的需求,所以我们需要对其进行一些修改,并加入一些别的方法. 我们经常会使用antd的form表单上传数据,有时就会需要同时上传图片.所以在这里我们需要实现的是,前端页面上传多张图片时,先存储在前端,当表单上传时,和表单数据一起上传到后端. 实现方法 1.初始化 首先,在最前面引入

  • Python中字符串的修改及传参详解

    Python中字符串的修改及传参详解

    发现问题 最近在面试的时候遇到一个题目,选择用JavaScript或者Python实现字符串反转,我选择了Python,然后写出了代码(错误的): #!/usr/bin/env python #-*-coding:utf-8-*- __author__ = 'ZhangHe' def reverse(s): l = 0 r = len(s) - 1 while l < r: s[l],s[r] = s[r],s[l] l += 1 r -= 1 return s 然后面试官问了两个问题: (1)

  • JavaScript中使用arguments获得函数传参个数实例

    JavaScript中使用arguments获得函数传参个数实例

    JS与PHP在函数传参方面有点不同,PHP形参与实参个数要匹配,而JS就灵活多了,可以随意传参,实参比形参少或多都不会报错. 实参比形参多不会报错 function say(a){    alert(a); }   say('琼台博客','WEB技术博客'); 执行结果 我们再来看看形参比实参多的结果 function say(a,b){    alert('a 的值是 '+a+'\nb 的值是 '+b); }   say('琼台博客'); 执行结果 a 对应第一个实参"琼台博客",b

  • 通过字节码看java中this的隐式传参详解

    前言 从字节码看java中 this 隐式传参具体体现(和python中的self如出一辙,但是比python中藏得更深),也发现了 static 与 非 static 方法的区别所在! static与非static方法都是存储java的方法区.在static 方法中,没有this引用,因此无法使用当前类中所定义的变量,而非static方法则会默认传入this. 概述 this关键字,是一个隐式参数,另外一个隐式参数是super. this用于方法里面,用于方法外面无意义. this关键字一般用

随机推荐