React Context入门：小百姓如何开启自己的全局通信？

React Context入门：小百姓如何开启自己的全局通信？

如果你有一天，突然发现自己的 React 项目里「子组件需要跟父组件传货数据」，但是一层传一层，一层传一层，你会怀疑：——

我是不是又连环带引爆了？

别怕！这时候，React 给了你一把神器：Context！

这篇文，我会用最可爱最诡质的语法，带你一起掌握 Context 。

—— 目标：看完直接开始自己写 Provider，第一次让全局通信如水一样顺畅！

---

一，Context简单理解：我就是一个广播器

把 Context 理解成：

• 做一个 全局广播器，
• 所有 子组件都可以接收广播内容，
• 不用了字段一层传一层，路路实实达成了通信。

---

二，小演示：自建一个 ThemeContext

来！发入我们的第一段 Context 体验。

第一步：创建 Context

import { createContext } from 'react';

const ThemeContext = createContext(); // 简单更精美

第二步：写 Provider

import React, { useState } from 'react';

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prev => (prev === 'light' ? 'dark' : 'light'));
  };

  return (
    
      {children}
    
  );
};

第三步：写个用户 Hook

import { useContext } from 'react';

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) throw new Error('useTheme 必须在 ThemeProvider 里使用');
  return context;
};

---

三，全局通信：如何让子组件聽观？

下面，一个子组件，直接使用 Context：

const ThemeSwitcher = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    

      
当前为：{theme}模式
      切换模式
    
  );
};

如果你想在全局的 App 里封装：

const App = () => (
  
    
  
);

此时，ThemeSwitcher 不用经过一大堆 props，一點即到，直接用 Context 全局通信！

---

四，后面发现了啥？

Context 一下子：

• IMContext 类似 ThemeContext，是一个广播器
• IMProvider 类似 ThemeProvider，是封装了 Provider 的组件，监听用户登记等进行处理
• useIM 类似 useTheme，是用户在子组件中调用的全局 Hook

你得到的：——

Context 是基础，Provider 是组织，Hook 是使用！

---

结论

如果说有啥是 React 里的 “高性价比技能”，Context 算一个！

• 很小，学起来很轻松
• 很强，充分解耦你的组件
• 很可拓展，后面上独立独站的 state 管理器（比如 Redux），都是从这里体会起的

没有什么能比：

“我不用 props 一层一层传，子组件自由吸吸广播”

更爽的了！

「你没有理解 Context，你只看到传统成功，你理解了 Context，你自己就是传统」！

（哈，还是不错的！）

---

补充

如果你想看一个更大的实战案例，推荐自己写一个 “AuthContext” 或 “LanguageContext” ，自己体会一下，一定超级有成就感！