React Context 详解

最新推荐文章于 2025-03-03 16:35:42 发布

shiver_mc

最新推荐文章于 2025-03-03 16:35:42 发布

阅读量652

点赞数 1

分类专栏：前端web react 文章标签： react

本文链接：https://blog.youkuaiyun.com/shiverLHCC/article/details/115033329

版权

本文详细介绍了React Context的使用场景、API、最佳实践及注意事项。阐述了何时使用和不适用Context，提供了Provider和Consumer组件的用法，并讨论了动态更新Context、消费多个Context以及避免渲染陷阱的策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React Context 是一个强大的组件广播功能，但是也不能随意滥用，它并不适合一些简单的组件通信，如果杀鸡用牛刀可能会起到相反的效果

什么时候使用

当你要在组件树中共享一些全局数据的时候，比如要让你的应用风格可配置，或则语言可选那么像这种 theme 或 language 的属性就可以托管给 Context

案例
先考虑不用context 的情况

// 假如现在你的组件树中有多个按钮需要随时切换背景颜色

// 你封装的按钮
class ThemeButton extends React.Component {
   
  render() {
   
    return <button style={
   {
   backgroundColor: this.props.theme}}>ThemeButton</button>
  }
}

// 在某个组件中使用了这个按钮
function Toolbar(props) {
   
  return (
    <div>
      <ThemeButton theme={
   props.theme}/>
    </div>
  )
}

// 为了能够在同一控制所有按钮的样式 你可以在App.js 中传入样式
class App extends Component {
   
  render() {
   
    return (
      <div>
        <Toolbar theme="blue"/>
      </div>
    );
  }
}

你会发现就一个简单的theme 属性要通过 App -> Toolbar -> ThemeButton ,如果嵌套的关系更加复杂，那么这种传递props的方式就不太合适了

用 Context 广播来优化

// 声明一下我将所有组件写在一起只是方便演示，你可以将组件写在不同的文件中
//1. 首先你可以在src 下创建一个context的文件并创建index.js
import React from 'react'

export const ThemeContext = React.createContext('green')

之后你就可以使用这个导出的ThemeContext

import {
   ThemeContext} from '../context'

class ThemeButton extends React.Component {
   
  static contextType = ThemeContext
  render(

最低0.47元/天解锁文章