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

news2024/11/17 10:26:15

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

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

3.1 Context API 简介

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

Context API 的主要组成部分：

React.createContext： 创建一个 Context 对象。
Provider（提供者）： 提供 Context 的值。
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 实现主题切换的完整示例。

步骤：

创建 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);

在 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;

创建 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;