React Context的使用及典型使用场景

Context 为组件树提供了一个传递数据的方法，从而避免了在每一个层级手动传递 props 属性。

React.createContext 创建一个上下文的容器， defaultValue可以设置共享的默认数据。

代码语言：javascript复制

const {Provider, Consumer} = React.createContext(defaultValue);

Provider 数据生产者，用于生产共享数据的地方，value即为放置共享的数据。

代码语言：javascript复制

<Provider value={/*共享的数据*/}>
  /*里面可以渲染对应的内容*/
</Provider>

Consumer 数据消费者，消费供应商Provider产生数据。Consumer需要嵌套在生产者下面，通过回调的方式拿到共享的数据源，当然也可以单独使用，那就只能消费到上文提到的defaultValue。

代码语言：javascript复制

<Consumer>
  {value => /*根据上下文  进行渲染相应内容*/}
</Consumer>

Context典型的使用场景为切换全局界面主题，全局的语言切换，下面提供一个代码示例，供大家参考。

代码语言：javascript复制

import React from "react";
// 英文状态
const enStrings = {
  submit: "Submit",
  cancel: "Cancel"
};
// 中文状态
const cnStrings = {
  submit: "提交",
  cancel: "取消"
};
// 创建一个数据提供与数据消费者，同时可以赋初值
const {Provider,Consumer} = React.createContext(enStrings);

// 父组件数据提供者
class LocaleProvider extends React.Component {
  state = { locale: cnStrings };
  // 切换语言
  toggleLocale = () => {
    const locale = this.state.locale === enStrings? cnStrings: enStrings;
    this.setState({ locale });
  };
  render() {
    return (
      // 父组件提供数据
      <Provider value={this.state.locale}>
        <button onClick={this.toggleLocale}>
          切换语言
        </button>
        {this.props.children}
      </Provider>
    );
  }
}

// 子组件消费数据
class LocaledButtons extends React.Component {
  render() {
    return (
      // 子组件消费数据
      <Consumer>
        {locale => (
          <div>
            <button>{locale.cancel}</button>
            &nbsp;<button>{locale.submit}</button>
          </div>
        )}
      </Consumer>
    );
  }
}

export default () => (
  <div>
    <LocaleProvider>
      <div>
        <br />
        <LocaledButtons />
      </div>
    </LocaleProvider>
    <LocaledButtons />
  </div>
);

provider

0 人点赞