从零理解React Context：神奇的上下文机制

一、什么是context

一般来说，组件之间传数据，使用props，实现"父传子、子传孙"一层层传下去，但是如果组件层级太多，使用props就很麻烦，这个时候就可以使用context，它相当于是组件的中心点，任何子组件都可以直接去这里面取值。

例如如下场景：

tsx 复制代码

function App() {
  return <Page user="Jseeza" />;
}
 
function Page({ user }) {
  return <Content user={user} />;
}
 
function Content({ user }) {
  return <UserInfo user={user} />;
}
 
function UserInfo({ user }) {
  return <p>欢迎你，{user}</p>;
}

如果想把user从App传到UserInfo，需要层层递进，每一层都传props.user，如果项目很大很复杂，就很麻烦。

在此基础上引入context，其目的在于让"子代组件"直接读取祖先组件的数据，不需要经过层层传递。

二、Context的搭建

第一步：创建一个context

tsx 复制代码

import { createContext, useContext } from 'react';
 
const UserContext = createContext(); // 创建上下文对象

第二步：<Provider>--提供数据

tsx 复制代码

function App() {
  return (
    <UserContext.Provider value={{ name: 'Jseeza', age: 18 }}>
      <Page />
    </UserContext.Provider>
  );
}

这样则表示所有后代组件都可以直接访问到name和age

第三步：useContext--后代读取组件

tsx 复制代码

function UserInfo() {
  const user = useContext(UserContext);
  return <p>你好，{user.name}！你 {user.age} 岁了。</p>;
}

使用ctx，则无需props，也无需考虑中间层的层层传递逻辑。

三、Context的更新

当Provider的value发生变化时，所有使用useContext()的组件都会自动重新渲染

例如：

tsx 复制代码

/** 父组件 */
function App() {
  const [user, setUser] = useState({ name: 'Jseeza' });
 
  return (
    <UserContext.Provider value={user}>
      <Profile />
      <button onClick={() => setUser({ name: 'Alliza' })}>改名</button>
    </UserContext.Provider>
  );
}
 
/** 子组件 */
function Profile() {
  const user = useContext(UserContext);
  return <p>用户名：{user.name}</p>;
}

当点击改名后，context中的user.bane更新为新名字，所有子组件也自动更新。

四、Context和Props的对比

对比项	props	Context
数据流方向	父 → 子（必须层层传）	祖先 → 任意后代
灵活性	适合单一组件传参	适合全局共享
典型用法	普通数据传递	主题、语言、用户、登录状态等
是否响应变化	会	会（value 变化会重渲染）

五、多个Context如何灵活运用

可以嵌套多个Provider：

tsx 复制代码

const ThemeContext = createContext('light');
const UserContext = createContext(null);
 
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <UserContext.Provider value={{ name: 'Jseeza' }}>
        <Page />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}
 
/** 子组件：使用useContext拿取不同的ctx */
function Info() {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);
  return <p>{user.name} 使用 {theme} 主题</p>;
}

六、Context+自定义hooks封装

也可以自己根据项目需要封装一层定制的hook，从而减少Provider的反复出现，优化代码层级。简单的示例如下：

tsx 复制代码

/** 封装createCtx */
function createCtx(defaultValue) {
  const Ctx = createContext(defaultValue);
  function useCtx() {
    const c = useContext(Ctx);
    if (!c) throw new Error('useCtx must be inside Provider');
    return c;
  }
  return [useCtx, Ctx.Provider];
}

tsx 复制代码

/** 使用封装的ctx */
const [useUser, UserProvider] = createCtx({ name: 'Guest' });
 
function App() {
  return (
    <UserProvider value={{ name: 'Jseeza' }}>
      <Profile />
    </UserProvider>
  );
}
 
function Profile() {
  const user = useUser();
  return <p>{user.name}</p>;
}