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

更新时间：2022年09月15日 08:34:46 作者：何其涛

这篇文章主要介绍了react中关于Context/Provider/Consumer传参的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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>
        )
    }
}

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

您可能感兴趣的文章:

react echarts tooltip 区域新加输入框编辑保存数据功能
这篇文章主要介绍了react echarts tooltip 区域新加输入框编辑保存数据功能,大概思路是用一个div包裹echarts, 然后在echarts的同级新建一个div用来用来模拟真实tooltip，通过鼠标移入移出事件控制真实tooltip的显示与隐藏，需要的朋友可以参考下
2023-05-05
JS跨域解决方案react配置反向代理
这篇文章主要为大家介绍了JS跨域解决方案react配置反向代理的示例内容详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
2021-11-11
浅谈python的函数知识
这篇文章主要为大家介绍了python的函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
React 使用browserHistory项目访问404问题解决
这篇文章主要介绍了React 使用browserHistory项目访问404问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
关于React项目中的PDF展示解决方案
这篇文章主要介绍了关于React项目中的PDF展示解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
react umi 刷新或关闭浏览器时清除localStorage方式
这篇文章主要介绍了react umi 刷新或关闭浏览器时清除localStorage方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
React新文档切记不要滥用effect
这篇文章主要为大家介绍了React新文档滥用effect出现的问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
一起来学习React元素的创建和渲染
这篇文章主要为大家详细介绍了React元素的创建和渲染，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
解决react中useState状态异步更新的问题
本文主要介绍了react中useState状态异步更新的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
基于React实现无限滚动表格
以文本为例,为了实现无限循环的视觉效果,我们需要准备两段相同的文本,并让第二段文本的头部衔接在第一段文本的尾部,同时,为两段文本设置相同的滚动动画,本文给大家介绍了基于React实现无限滚动表格,需要的朋友可以参考下
2023-11-11