React Native 中如何使用 useContext Hook？

推荐答案

在 React Native 中，useContext Hook 用于在函数组件中访问 React 的上下文（Context）。以下是使用 useContext 的基本步骤：

1. 创建 Context：首先，使用 React.createContext 创建一个上下文对象。
2. 提供 Context：使用 Context.Provider 包裹组件树，并通过 value 属性传递数据。
3. 使用 Context：在子组件中使用 useContext Hook 来访问上下文中的数据。

示例代码

// www.javascriptcn.com code example
import React, { useContext } from 'react';
import { View, Text } from 'react-native';

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

// 2. 提供 Context
const App = () => {
  return (
    <MyContext.Provider value={{ theme: 'dark' }}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

// 3. 使用 Context
const ChildComponent = () => {
  const context = useContext(MyContext);
  return (
    <View>
      <Text>当前主题: {context.theme}</Text>
    </View>
  );
};

export default App;

本题详细解读

1. 创建 Context

React.createContext 用于创建一个上下文对象。这个对象包含两个组件：Provider 和 Consumer。Provider 用于提供数据，Consumer 用于消费数据。在函数组件中，我们通常使用 useContext 来替代 Consumer。

const MyContext = React.createContext();

2. 提供 Context

Context.Provider 组件用于包裹需要访问上下文的组件树。通过 value 属性，可以将数据传递给子组件。

<MyContext.Provider value={{ theme: 'dark' }}>
  <ChildComponent />
</MyContext.Provider>

3. 使用 Context

在子组件中，使用 useContext Hook 来访问上下文中的数据。useContext 接收一个上下文对象作为参数，并返回该上下文的当前值。

const ChildComponent = () => {
  const context = useContext(MyContext);
  return (
    <View>
      <Text>当前主题: {context.theme}</Text>
    </View>
  );
};

注意事项

• useContext 只能在函数组件中使用。
• 如果 useContext 的参数不是由 React.createContext 创建的上下文对象，React 会抛出错误。
• 当 Provider 的 value 发生变化时，所有使用 useContext 的子组件都会重新渲染。