1. React Context 使用方法

import React, { createContext, useState, useContext } from 'react';

// 定义 Context 的类型接口
interface UserContextType {
username: string;
setUsername: (username: string) => void;
}

// 创建 Context，并提供默认值
const UserContext = createContext<UserContextType>({
username: '',
setUsername: () => {}
});

// Provider 组件
export const UserProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [username, setUsername] = useState<string>('');

return (
  <UserContext.Provider value={{ username, setUsername }}>
    {children}
  </UserContext.Provider>
);
};

// 自定义 Hook 简化 Context 使用
export const useUser = () => useContext(UserContext);

// 使用示例组件
const ProfileComponent: React.FC = () => {
const { username, setUsername } = useUser();

return (
  <div>
    <input 
      value={username} 
      onChange={(e) => setUsername(e.target.value)} 
      placeholder="输入用户名" 
    />
    <p>当前用户: {username}</p>
  </div>
);
};

// 根组件
const App: React.FC = () => {
return (
  <UserProvider>
    <ProfileComponent />
  </UserProvider>
);
};

export default App;

2. React Native Context 使用方法

import React, { createContext, useState, useContext } from 'react';
import { View, Text, Switch, StyleSheet } from 'react-native';

// 定义主题类型
type Theme = 'light' | 'dark';

// 定义 Context 接口
interface ThemeContextType {
theme: Theme;
toggleTheme: () => void;
}

// 创建 Context
const ThemeContext = createContext<ThemeContextType>({
theme: 'light',
toggleTheme: () => {}
});

// Provider 组件
export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [theme, setTheme] = useState<Theme>('light');

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

return (
  <ThemeContext.Provider value={{ theme, toggleTheme }}>
    {children}
  </ThemeContext.Provider>
);
};

// 自定义 Hook
export const useTheme = () => useContext(ThemeContext);

// 使用 Context 的组件
const ThemeToggleComponent: React.FC = () => {
const { theme, toggleTheme } = useTheme();

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: theme === 'light' ? '#ffffff' : '#000000'
  },
  text: {
    color: theme === 'light' ? '#000000' : '#ffffff'
  }
});

return (
  <View style={styles.container}>
    <Text style={styles.text}>当前主题: {theme}</Text>
    <Switch 
      value={theme === 'dark'} 
      onValueChange={toggleTheme} 
    />
  </View>
);
};

// 根组件
const App: React.FC = () => {
return (
  <ThemeProvider>
    <ThemeToggleComponent />
  </ThemeProvider>
);
};

export default App;

Context 使用的关键点

创建 Context

• 使用 createContext() 创建
• 定义明确的接口类型
• 提供默认值

创建 Provider

• 使用 useState 管理状态
• 通过 Provider 传递值
• 包裹子组件

自定义 Hook

• 简化 Context 使用
• 封装 useContext 调用

类型安全

• 使用 TypeScript 接口
• 明确定义 Context 类型

Context 基本用法详解

1. Context 创建的基本语法

// 创建 Context
const MyContext = React.createContext(defaultValue);

2. Context 的三个主要组成部分

1. 创建 Context
2. Provider（提供者）
3. Consumer（消费者）

3.完整的 Context 使用示例 （如上代码实例）

Context 使用的四种主要方式

1. 基本 Context 创建

// 创建一个简单的 Context
const MyContext = React.createContext(defaultValue);

2. 带类型的 Context 创建

// 定义 Context 的类型接口
interface ThemeContextType {
  theme: string;
  toggleTheme?: () => void;
}

// 创建带类型的 Context
const ThemeContext = React.createContext<ThemeContextType>({
  theme: 'light'
});

3. Provider 使用

// 使用 Provider 传递值
<MyContext.Provider value={/* 具体值 */}>
  {children}
</MyContext.Provider>

4. 消费 Context 的两种方式

方法1：useContext Hook（推荐）

function MyComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

方法2：Context.Consumer

function MyComponent() {
  return (
    <MyContext.Consumer>
      {value => (
        <div>{value}</div>
      )}
    </MyContext.Consumer>
  );
}

Context 使用场景

全局状态管理

• 主题切换
• 用户认证信息
• 语言设置

避免逐层传递 props

// 避免这种繁琐的传递
<ComponentA props={props}>
  <ComponentB props={props}>
    <ComponentC props={props} />
  </ComponentB>
</ComponentA>

// 使用 Context 可以直接在需要的组件中获取

高级用法：多个 Context

// 创建多个 Context
const ThemeContext = React.createContext('light');
const UserContext = React.createContext(null);

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <UserContext.Provider value={currentUser}>
        <Component />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

注意事项

1. Context 的值改变会导致所有使用该 Context 的组件重新渲染
2. 对于频繁变化的值，需要注意性能
3. 不要滥用 Context，对于简单的组件通信，props 可能是更好的选择

性能优化技巧

// 使用 useMemo 减少不必要的重渲染
const memoizedValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);