React Context 和 useContext

1. Context

在 React 使用过程中，公共信息，例如语言，主题等如何传递给每个组件呢

而当组件层级不多不少的时候，共享的数据也不多时，这个时候会稍微有些尴尬，用 props 会有点繁琐， 而用 Redux 又不至于。那就可以考虑 Context。

Context 可以实现隔层传递，只需要在顶层组件定义，然后在子组件中按需引入即可，从而避免了一层一层的手动传递 props 属性。

Context 使用并不复杂，直接看看具体使用示例吧：

顶层组件：

import React from 'react'

// 引入中间组件
import IntermediaryComponents from './IntermediaryComp'

// 通过 createContext 定义一个 context
export const ThemeContext = React.createContext('light')

/**
 * 顶层组件，定义主题
 */
class Context extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      theme: {
        color: 'light',  // light,dark
        size: 'small',  // small, middle, large
      }
    }
  }

  changeTheme = () => {
    const theme = {
      color: 'dark',  // light,dark
      size: 'large',  // small, middle, large
    }
    this.setState({
      theme
    })
  }

  render() {
    const { theme } = this.state;
    return (
      <div>
        {/* 使用定义的 context 的 provider 做父容器，value 是传递的值, 如果需要传多个值，可以用对象封装一下 */}
        <ThemeContext.Provider value={theme}>
          <IntermediaryComponents />
        </ThemeContext.Provider>
        <hr />
        {/* 修改顶层组件的主题，就能全局实现修改主题 */}
        <button onClick={this.changeTheme}>修改主题</button>
      </div>
    )
  }
}
export default Context;

中间组件：

import React from 'react'

import ThemeConsumerComp from './ThemeConsumerComp'

/**
 * 中间组件，不做任何操作，只为引入下一级组件做隔层传递数据展示
 */
class IntermediaryComponents extends React.Component {

  render() {
    return (
      <div>
          <ThemeConsumerComp />
      </div>
    )
  }
}
export default IntermediaryComponents;

接收组件：

import React from 'react'

// 引入对应的通过 createContext 创建的 context，一定要引入
import { ThemeContext } from './Theme'

/**
 * 类组件接收隔层数据
 */
class ThemeConsumerComp extends React.Component {
  render() {
    return (
      <div>
				{/* 使用 ThemeContext.Consumer，在里面定义函数，参数就是顶层组件传的值  */}
        <ThemeContext.Consumer>
          {
            // 这里 theme 的参数就是顶层组件传入的值，也可以用ES6对象的解构赋值{color, size}
            (theme) => {
              return (
                <p>顶层组件定义的主题：颜色为{theme.color}, 大小为{theme.size}</p>
              )
            }
          }
        </ThemeContext.Consumer>
      </div>
    )
  }
}

/**
 * 函数组件接收隔层数据
 */
// const ThemeConsumerComp = () => {

//   return (
//     

//       
//         {
//           (theme) => {
//             return (
//               
顶层组件定义的主题：颜色为{theme.color}, 大小为{theme.size}
//             )
//           }
//         }
//       
//     
// )
// }
export default ThemeConsumerComp;

2.useContext

与 Context 一样，在 React Hooks 中也提供了更加高级的一种组件中传递值的方式，不再需要一层一层的向下传递，而是可以隔层传递。

import React, { useContext } from 'react'

// 主题颜色
const themes = {
  light: {
    foreground: '#000',
    background: '#eee',
  },
  dark: {
    foreground: '#fff',
    background: '#222',
  },
}

// 创建 Context
const ThemeContext = React.createContext(themes.light)

/**
 * 下面定义三个组件演示隔层传递
 */

const ThemeButton = () => {

  const theme = useContext(ThemeContext)

  return (
    <button 
      style={{background: theme.background, color: theme.foreground}}
    >
      hello world
    </button>
  )
}

const Toolbar = () => {
  return (
    <>
      <ThemeButton></ThemeButton>
    </>
  )
}

const HooksT = () => {

  return (
    <>
      {/* ThemeContext.Provider */}
      <ThemeContext.Provider value={themes.dark}>
        <Toolbar></Toolbar>
      </ThemeContext.Provider>
    </>
  )
}

export default HooksT;

想了解更多 hooks 的功能，可以看看我关于 React Hooks 的一篇文章。

https://blog.csdn.net/qq_40228484/article/details/114087618?spm=1001.2014.3001.5501