React状态管理之Context

抛出问题

在平时使用react的过程中,数据都是自顶而下的传递方式,例如,如果在顶层组件的state存储了theme主题相关的数据作为整个App的主题管理。那么在不借助任何第三方的状态管理框架的情况下,想要在子组件里获取theme数据,就必须的一层层传递下去,即使两者之间的组件根本不需要该数据;就如同下图所示,并且如果App的层级越深,这之间的层层传递对开发者来说可谓是灾难。

引入context

正因为有了跨越层级传递值的这么一种需求,其实官方也提供了context的机制。通过context,我们就能够在子组件里获取祖先组件里的值,而不需要层层传递。其实很多的状态管理框架与react结合的库就是使用了context特性,例如著名的react-redux。

在v16.3之前的context只是官方的实验性API,其实官方是不推荐开发者使用的,但是架不住很多框架依旧在使用它;所以官方在v16.3发布的新的context API,新的API会更加的易用,本文也是以v16.3为准。

在新的context API中,React提供了一个createContext的方法,该方法返回一个包含了Provider,Consumer的对象,而Provoider,Consumer对象就是新API的重点。

我们先看一个简单的例子,再来讲解API。在本案例中,在顶层父组件的state存储着控制这个App的theme的一些属性,使用context来跨组件传递这些属性,使得底层组件能够直接得到这些属性。

首先在themeContext.js文件中定义context,并导出Provider以及Consumer:

import {createContext} from "react";

export const {Provider, Consumer} = createContext({
  color: "green",
  fontSize: "20px"
});
复制代码

createContext需要传递一个参数,叫做defaultValue。这个值会在什么时候起作用呢?这个稍后解释。

然后我们就可以直接在顶层的App组件中,直接使用Provider:

import React, {Component} from 'react';
import {Provider} from "./context/themeContext";
import Parent from "./Parent";

class App extends Component {
  state = {
    color: "red",
    fontSize: "16px"
  };

  render() {
    return (
      <div className="App">
        <Provider value={this.state}>
          <Parent/>
        </Provider>
      </div>
    );
  }
}

export default App;
复制代码

我们直接在顶层的组件里使用Provider组件,并且Provider组件有一个value属性用于传递context的实际的value。然后我们就可以在底层的Child组件中得到这些value来使用。

层级关系:App -> Parent -> Child

import React, {PureComponent} from "react";
import {Consumer} from "./context/themeContext";

class Child extends PureComponent {
  render() {
    return <Consumer>
      {
        style => <div style={style}>This is Child Component that gets style value through context.</div>
      }
    </Consumer>
  }
}

export default Child;
复制代码

在Child组件中使用Consumer,就能够得到上层所传递context的值;Consumer的需要一个函数作为子元素,该函数的参数就是上层所传递context value,然后就可以返回该组件具体的组件样式了。

这就是一个简单的使用context的例子,可以看到context的API是非常简单的,也可容易使用,再简单总结一下API:

  • createContext:用于创建context,需要一个defaultValue的参数,并返回一个包含Provider,以及Consumer的对象
  • Provider:顶层用于提供context的组件,包含一个value的props,value是实际的context数据
  • Consumer:底层用于获取context的组件,需要一个函数作为其子元素,该函数包含一个value的参数,该函数的参数就是上层所传递context value

看到这里,你可能会有一个疑惑:为什么createContext需要一个defaultValue,而Provider还需要一个实际的value?到底defaultValue是什么时候起作用呢?先抛出结论:只有在上层组件没有提供Provider组件时,下层组件的Consumer才会直接使用defaultValue作为子函数的参数传递。以本例子为例,只有在App组件压根没有使用Provider组件时,Child组件中的Consumer的子函数参数才会是{ color: "red", fontSize: "16px" }这个defaultValue,其他情况都不会使用到这个值。这个地方有一个常见的误解:就是不给上层组件的Provider的value属性,或者让value={undefined}时,就会使用defaultValue,这是不对的!!!请切记,大家也可以自己尝试,看看是不是这个结论。

更近一步

虽然使用了Consumer能够让我们很方便的得到context的value,但是如果很多子元素要得到context的值,都去先调用Consumer,再在它的子函数里返回真正的组件内容,会显得十分的累赘。所以我们可以对Consumer进行一个简单的封装,封装一个connect的方法。去实现类似于react-redux其中的connect函数的效果。connect方法的代码如下:

import React from "react";
import {Consumer} from "./context";

export default mapState => {
  return WrappedComponent => {
    const Component = props => (<Consumer>
      {
        value => {
          let mappedProps = mapState(value);
          return <WrappedComponent {...props} {...mappedProps}/>
        }
      }
    </Consumer>);
    Component.displayName = `connect(${WrappedComponent.displayName || WrappedComponent.name || "Component"})`;
    return Component;
  }
};
复制代码

简单解释一下:connect方法需要传入一个mapState方法,mapState方法是context的value映射方法,当调用connect方法后,会依旧返回一个函数;该函数实际是一个高阶函数工厂,将传入的WrappedComponent组件用Consumer包裹里面,并结合之前的mapState映射得到具体的计算后的props属性,并把这些props属性都赋予给WrappedComponent。这样,我们在之后想要得到context时,只需要简单调用一下该方法即可。

再结合一个例子看看怎么使用connect方法:假如现在有一个App用户显示学生的相关信息;学生的信息包含了name,age,gender三个属性;此外有两个组件Student、StudentGender;Student用于显示学生的name,age,并且有一个+按钮,点击就会在当前年龄加一岁。

层级关系如下:App -> StudentContainer -> Student

App组件的代码如下:

import React, {Component} from 'react';
import {Provider} from "./context";
import StudentContainer from "./StudentContainer";

class App extends Component {

  onIncreaseAge = () => {
    this.setState(preState => ({
      age: preState.age + 1
    }))
  };

  state = {
    name: "张三",
    age: 12,
    gender: "男",
    onIncreaseAge: this.onIncreaseAge
  };

  render() {
    return (
      <div className="App">
        <Provider value={this.state}>
          <StudentContainer/>
        </Provider>
      </div>
    );
  }
}

export default App;
复制代码

在App组件中,我们将student的属性以及增加年龄的方法一同传递给了context,使得子组件既能获得属性,也能调用修改属性的方法。

Student组件的代码如下:

import React from "react";
import {connect} from "./context";

const Student = ({studentName, studentAge, onIncreaseAge}) => {
  return <div>
    <span className="title">Student:</span>
    <ul>
      <li>name: {studentName}</li>
      <li>age: {studentAge}
        <button onClick={onIncreaseAge}>+</button>
      </li>
    </ul>
  </div>;
};

const mapState = state => ({
  studentName: state.name,
  studentAge: state.age,
  onIncreaseAge: state.onIncreaseAge
});
export default connect(mapState)(Student);
复制代码

可以看到,当我们使用了connect方法后,Student组件就变成了一个傻瓜组件,只需要专心负责显示数据即可。

结语

以上就是关于context的简单介绍,可以看到它确实十分简单的实现了跨层级传递数据的功能。所以当我们想要跨层级传递数据时,而数据本身要传递的地方不多,这个时候往往不想再引入一个更复杂的状态管理框架(如redux等),这个时候,context会是一个十分不错的选择。 本文所涉及到的案例的地址在此,其中第一个案例在分支sample-theme中,第二个案例在分支encapsulate中。

如果对本文有什么意见和建议,欢迎讨论和指正!!!

相关推荐
<p> 欢迎参加英特尔® OpenVINO™工具套件初级课程 !本课程面向零基础学员,将从AI的基本概念开始,介绍人工智能与视觉应用的相关知识,并且帮助您快速理解英特尔® OpenVINO™工具套件的基本概念以及应用场景。整个课程包含了视频的处理,深度学习的相关知识,人工智能应用的推理加速,以及英特尔® OpenVINO™工具套件的Demo演示。通过本课程的学习,将帮助您快速上手计算机视觉的基本知识和英特尔® OpenVINO™ 工具套件的相关概念。 </p> <p> 为保证您顺利收听课程参与测试获取证书,还请您于<strong>电脑端</strong>进行课程收听学习! </p> <p> 为了便于您更好的学习本次课程,推荐您免费<strong>下载英特尔® OpenVINO™工具套件</strong>,下载地址:https://t.csdnimg.cn/yOf5 </p> <p> 收听课程并完成章节测试,可获得本课程<strong>专属定制证书</strong>,还可参与<strong>福利抽奖</strong>,活动详情:https://bss.csdn.net/m/topic/intel_openvino </p> <p> 8月1日-9月30日,学习完成【初级课程】的小伙伴,可以<span style="color:#FF0000;"><strong>免费学习【中级课程】</strong></span>,中级课程免费学习优惠券将在学完初级课程后的7个工作日内发送至您的账户,您可以在:<a href="https://i.csdn.net/#/wallet/coupon">https://i.csdn.net/#/wallet/coupon</a>查询优惠券情况,请大家报名初级课程后尽快学习哦~ </p> <p> <span style="font-size:12px;">请注意:点击报名即表示您确认您已年满18周岁,并且同意CSDN基于商务需求收集并使用您的个人信息,用于注册OpenVINO™工具套件及其课程。CSDN和英特尔会为您定制最新的科学技术和行业信息,将通过邮件或者短信的形式推送给您,您也可以随时取消订阅不再从CSDN或Intel接收此类信息。 查看更多详细信息请点击CSDN“<a href="https://passport.csdn.net/service">用户服务协议</a>”,英特尔“<a href="https://www.intel.cn/content/www/cn/zh/privacy/intel-privacy-notice.html?_ga=2.83783126.1562103805.1560759984-1414337906.1552367839&elq_cid=1761146&erpm_id=7141654/privacy/us/en/">隐私声明</a>”和“<a href="https://www.intel.cn/content/www/cn/zh/legal/terms-of-use.html?_ga=2.84823001.1188745750.1560759986-1414337906.1552367839&elq_cid=1761146&erpm_id=7141654/privacy/us/en/">使用条款</a>”。</span> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页