useContext 钩子函数

1、useContext 钩子函数简要说明

以前在 React 中要获取 context 对象的话只有在类组件中可以获取，但是现在使用 useContext 钩子函数后就可以获取到 context 对象。

2、useContext 代码实例

1、声明 context 组件

import React, { useState } from "react";
import ClassTheme from "../componentsDemo/ClassTheme";
import FunctionTheme from "../componentsDemo/FunctionTheme";

export const ThemeContext = React.createContext(true);

const UseContext: React.FC = () => {
  const [darkTheme, setDarkTheme] = useState<boolean>(true);

  function functionTheme() {
    setDarkTheme((prevDarkTheme) => !prevDarkTheme);
  }

  return (
    <>
      <ThemeContext.Provider value={darkTheme}>
        <button onClick={functionTheme}>切换主题</button>
        <FunctionTheme />
        <ClassTheme />
      </ThemeContext.Provider>
    </>
  );
};

2、类组件中获取 context 对象

import React from "react";
import { ThemeContext } from "../components/useContextDemo";

class ClassTheme extends React.Component {
  themeStyles(dark: boolean) {
    return {
      backgroundColor: dark ? "#333" : "#ccc",
      color: dark ? "#ccc" : "#333",
      padding: "40px",
      margin: "40px",
    };
  }

  render() {
    return (
      <ThemeContext.Consumer>
        {(darkTheme) => {
          return <div style={this.themeStyles(darkTheme)}>类组件</div>;
        }}
      </ThemeContext.Consumer>
    );
  }
}

3、函数组件中获取 context 对象

import { useContext } from "react";
import { ThemeContext } from "../components/useContextDemo";

const FunctionTheme: React.FC = () => {
  const darkTheme = useContext(ThemeContext);
  const themeStyles = (dark: boolean) => {
    return {
      backgroundColor: dark ? "#333" : "#ccc",
      color: dark ? "#ccc" : "#333",
      padding: "40px",
      margin: "40px",
    };
  };

  return <div style={themeStyles(darkTheme)}>函数组件肢体</div>;
};

3、升级上述代码

上述代码中 context 对象维护与组件混在一起不利于维护，所以可以把 context 对象维护的部分抽离，这样有利于组件的维护。

3.1 抽离 context 部分

const ThemeContext = React.createContext(true);
const ThemeContextUpdate = React.createContext(() => {});

export function useTheme() {
  return useContext(ThemeContext);
}

export function useThemeUpdate() {
  return useContext(ThemeContextUpdate);
}

const ThemeContextCustomize: React.FC<ThemeContextProp> = ({ children }) => {
  const [darkTheme, setDarkTheme] = useState<boolean>(true);

  function functionTheme() {
    setDarkTheme((prevDarkTheme) => !prevDarkTheme);
  }

  return (
    <>
      <ThemeContext.Provider value={darkTheme}>
        <ThemeContextUpdate.Provider value={functionTheme}>
          {children}
        </ThemeContextUpdate.Provider>
      </ThemeContext.Provider>
    </>
  );
};

3.2 函数组件修改

const FunctionTheme: React.FC = () => {
  const darkTheme = useTheme();
  const themeUPdate = useThemeUpdate();

  const themeStyles = (dark: boolean) => {
    return {
      backgroundColor: dark ? "#333" : "#ccc",
      color: dark ? "#ccc" : "#333",
      padding: "40px",
      margin: "40px",
    };
  };

  return (
    <>
      <button onClick={themeUPdate}>切换主题</button>
      <div style={themeStyles(darkTheme)}>函数组件肢体</div>
    </>
  );
};

3.3 最外层 context 管理组件抽离

const UseContext: React.FC = () => {
  return (
    <>
      <ThemeContextCustomize>
        <FunctionTheme />
      </ThemeContextCustomize>
    </>
  );
};