React 中 useContext 的作用和用法是什么？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

useContext 是 React 提供的一个 Hook，用于在函数组件中访问 React 的上下文（Context）。它允许你在不通过组件树逐层传递 props 的情况下，将数据传递给深层嵌套的组件。

用法示例

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

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

function ParentComponent() {
  return (
    <MyContext.Provider value="Hello, Context!">
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  // 使用 useContext 获取 Context 的值
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

在这个例子中，ParentComponent 通过 MyContext.Provider 提供了一个值，ChildComponent 通过 useContext 获取了这个值并显示出来。

本题详细解读

什么是 `useContext`？

useContext 是 React 16.8 引入的一个 Hook，用于在函数组件中访问 React 的上下文（Context）。它简化了在组件树中传递数据的方式，避免了“prop drilling”（即通过多层组件传递 props）的问题。

如何使用 `useContext`？

创建 Context：首先需要使用 React.createContext() 创建一个 Context 对象。
提供 Context 值：通过 Context.Provider 组件将值传递给子组件。
消费 Context 值：在子组件中使用 useContext Hook 来获取 Context 的值。

示例代码解析

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

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

function ParentComponent() {
  return (
    <MyContext.Provider value="Hello, Context!">
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  // 使用 useContext 获取 Context 的值
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

MyContext：通过 React.createContext() 创建的 Context 对象。
ParentComponent：使用 MyContext.Provider 包裹子组件，并通过 value 属性传递数据。
ChildComponent：通过 useContext(MyContext) 获取 ParentComponent 提供的值，并在组件中使用。

注意事项

useContext 只能在函数组件中使用。
当 Context.Provider 的 value 发生变化时，所有使用 useContext 的子组件都会重新渲染。
如果组件树中没有匹配的 Context.Provider，useContext 会返回 Context 的默认值（如果有的话）。

React 中 useContext 的作用和用法是什么？