context

定义

Context 提供了一种方式，能够让数据在组件树中传递而不必一级一级手动传递

api

// 创建一个context
createContext(defaultValue)
// 获取context的provider
contextName.Provider;
// 获取context的consumer
contextName.Consumer;

class 组件处理 context 的方式

单个 context

需要用 contextType，contextType 只能接收单一 context

// Context.js
import React from "react";

// 创建一个 context     
// createContext() 可以接受一个默认值
export const ThemeContext = React.createContext();
// 获取 provider
export const ThemeProvider = ThemeContext.Provider;

// 父组件
import React, { Component } from "react";
import HomePage from "./HomePage";
import { ThemeProvider } from "../Context";
export default class ContentPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: {
        themeColor: "red",
      },
    };
  }
  render() {
    const { theme } = this.state;
    return (
      <div>
        {/* 需要 context 数据的组件，要放在 provider 里面 */}
        <ThemeProvider value={theme}>
          <HomePage></HomePage>
        </ThemeProvider>
      </div>
    );
  }
}

// 子组件
import React, { Component } from "react";
import { ThemeContext } from "../Context";

export default class HomePage extends Component {
  // 指定 contextType 读取当前的 context
  // React 会往上找到最近的 Provider，然后使用它的值
  // contextType 只能在类组件使用
  static contextType = ThemeContext
  render() {
    const { themeColor } = this.context;
    return (
      <div className={themeColor}>HomePage</div>
    )
  }
}

多个 context

需要使用consumer接收

// context.js
import React from "react";

// 创建一个 context     
// createContext() 可以接受一个默认值
export const ThemeContext = React.createContext({themeColor: "pink"});
// 获取 provider
export const ThemeProvider = ThemeContext.Provider;
// 获取 consumer
export const ThemeConsumer = ThemeContext.Consumer;

export const UserContext = React.createContext();
export const UserProvider = UserContext.Provider;
export const UserConsumer = UserContext.Consumer;

//  父组件
import React, { Component } from "react";
import ConsumerPage from "./ConsumerPage";
import { ThemeProvider, UserProvider } from "../Context";

export default class ContextPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: {
        themeColor: "red",
      },
      user: {
        name: "dj",
      },
    };
  }
  render() {
    const { theme, user } = this.state;
    return (
      <div>
        {/* 多个 provider 需要嵌套写法 */}
        <ThemeProvider value={theme}>
          <UserProvider value={user}>
            <ConsumerPage></ConsumerPage>
          </UserProvider>
        </ThemeProvider>
      </div>
    );
  }
}

// 子组件
import React, { Component } from "react";
import { ThemeConsumer, UserConsumer } from "../Context";

export default class ConsumerPage extends Component {
  render() {
    return (
      <div>
        {/* 使用的时候，如果有多个 context 也是需要嵌套写法 */}
        <ThemeConsumer>
          {(themeContext) => (
            <div className={themeContext.themeColor}>
              消费者
              <UserConsumer>
                {(userContext) => <div>{userContext.name}</div>}
              </UserConsumer>
            </div>
          )}
        </ThemeConsumer>
      </div>
    );
  }
}

function 组件接收 context 的方式

需要用到 useContext，useContext 接受一个对象，对象里面都是 context 数据

import React, { useContext } from "react";
import { ThemeContext } from "../ThemeContext";

export default function UserPage() {
  // 接收 context
  const { themeColor } = useContext(ThemeContext);
  
  return <div className={themeColor}>UserPage</div>;
}