React Native 全栈开发实战班 - 状态管理入门（Context API）

在 React Native 应用中，状态管理 是构建复杂用户界面的关键。随着应用规模的增长，组件之间的数据共享和状态同步变得越来越复杂。React 提供了多种状态管理工具，其中 Context API 是 React 内置的轻量级解决方案，适用于中小型应用或特定场景下的状态管理。

本章节将介绍如何使用 React 的 Context API 进行状态管理，包括创建 Context、提供者（Provider）和消费者（Consumer）的使用，以及在 React Native 项目中的应用示例。

---

3.1 Context API 简介

Context API 是 React 提供的一种在组件树中传递数据的方式，无需通过组件的 props 一层层传递。它适用于那些需要在多个组件之间共享的数据，例如主题、语言设置、用户认证状态等。

Context API 的主要组成部分：

1. React.createContext： 创建一个 Context 对象。
2. Provider（提供者）： 提供 Context 的值。
3. Consumer（消费者）： 订阅 Context 的值。

---

3.2 使用 Context API

3.2.1 创建 Context

首先，需要创建一个 Context 对象，用于存储和管理全局状态。

// MyContext.js
import React from 'react';

const MyContext = React.createContext();

export default MyContext;

解释：

• React.createContext() 创建一个 Context 对象，默认值为 undefined。
• 可以通过 MyContext.Provider 和 MyContext.Consumer 来使用这个 Context。

3.2.2 提供 Context 的值（Provider）

使用 Provider 组件包裹需要访问 Context 的组件，并通过 value 属性提供 Context 的值。

// App.js
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import MyContext from './MyContext';
import ChildComponent from './ChildComponent';

const App = () => {
  const [user, setUser] = useState('张三');

  return (
    <MyContext.Provider value={user}>
      <View style={styles.container}>
        <Text style={styles.text}>Hello, {user}!</Text>
        <ChildComponent />
      </View>
    </MyContext.Provider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
  },
});

export default App;

解释：

• MyContext.Provider 包裹需要访问 Context 的组件。
• value 属性提供 Context 的值，这里是 user 状态。

3.2.3 消费 Context 的值（Consumer）

使用 Consumer 组件或 useContext Hook 来消费 Context 的值。

使用 Consumer 组件：

// ChildComponent.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import MyContext from './MyContext';

const ChildComponent = () => (
  <MyContext.Consumer>
    {(user) => (
      <View style={styles.container}>
        <Text style={styles.text}>User: {user}</Text>
      </View>
    )}
  </MyContext.Consumer>
);

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    padding: 10,
    backgroundColor: '#f0f0f0',
    borderRadius: 5,
  },
  text: {
    fontSize: 16,
  },
});

export default ChildComponent;

使用 useContext Hook：

// ChildComponent.js
import React, { useContext } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import MyContext from './MyContext';

const ChildComponent = () => {
  const user = useContext(MyContext);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>User: {user}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    padding: 10,
    backgroundColor: '#f0f0f0',
    borderRadius: 5,
  },
  text: {
    fontSize: 16,
  },
});

export default ChildComponent;

解释：

• MyContext.Consumer 组件通过函数接收 Context 的值，并渲染子组件。
• useContext Hook 更加简洁，推荐使用。

---

3.3 综合示例

以下是一个使用 Context API 实现主题切换的完整示例。

步骤：

1. 创建 ThemeContext：

   // ThemeContext.js
   import React from 'react';
   
   export const themes = {
     light: {
       backgroundColor: '#fff',
       textColor: '#333',
     },
     dark: {
       backgroundColor: '#333',
       textColor: '#fff',
     },
   };
   
   export const ThemeContext = React.createContext(themes.light);

2. 在 App 组件中提供 ThemeContext：

   // App.js
   import React, { useState } from 'react';
   import { View, Text, StyleSheet, Button } from 'react-native';
   import { ThemeContext, themes } from './ThemeContext';
   import ThemedView from './ThemedView';
   
   const App = () => {
     const [theme, setTheme] = useState(themes.light);
   
     return (
       <ThemeContext.Provider value={theme}>
         <View style={styles.container}>
           <ThemedView />
           <Button
             title="切换主题"
             onPress={() => setTheme(theme === themes.light ? themes.dark : themes.light)}
           />
         </View>
       </ThemeContext.Provider>
     );
   };
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
     },
   });
   
   export default App;

3. 创建 ThemedView 组件消费 ThemeContext：

   // ThemedView.js
   import React, { useContext } from 'react';
   import { View, Text, StyleSheet } from 'react-native';
   import { ThemeContext } from './ThemeContext';
   
   const ThemedView = () => {
     const theme = useContext(ThemeContext);
   
     return (
       <View style={[styles.container, { backgroundColor: theme.backgroundColor }]}>
         <Text style={{ color: theme.textColor, fontSize: 18 }}>Hello, Theme!</Text>
       </View>
     );
   };
   
   const styles = StyleSheet.create({
     container: {
       padding: 20,
       borderRadius: 5,
     },
   });
   
   export default ThemedView;

解释：

• ThemeContext 定义了主题相关的状态。
• App 组件通过 ThemeContext.Provider 提供主题状态。
• ThemedView 组件通过 useContext Hook 消费主题状态，并根据主题渲染样式。

---

3.4 Context API 的优缺点

优点：

• 简单易用，内置于 React，无需引入第三方库。
• 适用于中小型应用或特定场景下的状态管理。
• 可以与 Redux 等其他状态管理工具结合使用。

缺点：

• 对于大型应用，Context API 的可维护性较差。
• 每次 Context 值变化时，所有订阅的组件都会重新渲染，可能影响性能。

---

总结

本章节介绍了 React 的 Context API，包括创建 Context、提供者和消费者的使用，以及在 React Native 项目中的应用示例。通过 Context API，开发者可以轻松实现组件间的状态共享和通信，适用于中小型应用或特定场景下的状态管理。

---

课后作业

1. 练习使用 Context API 实现一个主题切换功能。
2. 创建一个包含多个组件的应用，使用 Context API 共享用户认证状态。
3. 阅读 React 官方文档，深入了解 Context API 的高级用法。

导师简介

前腾讯电子签的前端负责人，现 whentimes tech CTO，专注于前端技术的大咖一枚！一路走来，从小屏到大屏，从 Web 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

温馨提示：可搜老码小张公号联系导师