定義

Context 提供了一種方式，能夠讓數(shù)據(jù)在組件樹(shù)中傳遞而不必一級(jí)一級(jí)手動(dòng)傳遞

api

// 創(chuàng)建一個(gè)context
createContext(defaultValue)
// 獲取context的provider
contextName.Provider;
// 獲取context的consumer
contextName.Consumer;

class 組件處理 context 的方式

單個(gè) context

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

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

// 創(chuàng)建一個(gè) context     
// createContext() 可以接受一個(gè)默認(rèn)值
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 數(shù)據(jù)的組件，要放在 provider 里面 */}
        <ThemeProvider value={theme}>
          <HomePage></HomePage>
        </ThemeProvider>
      </div>
    );
  }
}

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

export default class HomePage extends Component {
  // 指定 contextType 讀取當(dāng)前的 context
  // React 會(huì)往上找到最近的 Provider，然后使用它的值
  // contextType 只能在類(lèi)組件使用
  static contextType = ThemeContext
  render() {
    const { themeColor } = this.context;
    return (
      <div className={themeColor}>HomePage</div>
    )
  }
}

多個(gè) context

需要使用consumer接收

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

// 創(chuàng)建一個(gè) context     
// createContext() 可以接受一個(gè)默認(rèn)值
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>
        {/* 多個(gè) provider 需要嵌套寫(xiě)法 */}
        <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>
        {/* 使用的時(shí)候，如果有多個(gè) context 也是需要嵌套寫(xiě)法 */}
        <ThemeConsumer>
          {(themeContext) => (
            <div className={themeContext.themeColor}>
              消費(fèi)者
              <UserConsumer>
                {(userContext) => <div>{userContext.name}</div>}
              </UserConsumer>
            </div>
          )}
        </ThemeConsumer>
      </div>
    );
  }
}

function 組件接收 context 的方式

需要用到 useContext，useContext 接受一個(gè)對(duì)象，對(duì)象里面都是 context 數(shù)據(jù)

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

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