面试题：React中Context的基本使用与原理简述

React中Context是什么

Context 是 React 提供的一种在组件树中共享数据的方式，它可以让你不必通过组件树的层层传递 props，就能将数据传递给深层的组件。这对于一些全局的数据，如当前用户信息、主题设置等非常有用，避免了在多个组件之间反复传递相同数据的繁琐操作。

在项目中何时会用到它

全局数据管理：当有一些数据需要在整个应用的多个组件中共享，比如用户的登录状态、当前语言设置等，使用 Context 可以方便地将这些数据传递到需要的组件，而无需在每个中间组件手动传递 props。
主题切换：如果应用有主题切换功能，主题相关的样式信息可以通过 Context 传递到各个组件，使得组件能够根据当前主题渲染不同的样式。
多语言切换：应用需要支持多语言时，当前语言的文本资源可以存放在 Context 中，供各个组件获取对应的文本进行显示。

如何创建和使用一个简单的Context

创建Context：

import React from 'react';

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

export default MyContext;

使用Context：

提供数据（Provider）：

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

const App = () => {
  const value = 'Hello, Context!';
  return (
    <MyContext.Provider value={value}>
      {/* 子组件树 */}
      <ChildComponent />
    </MyContext.Provider>
  );
};

const ChildComponent = () => {
  return <GrandChildComponent />;
};

const GrandChildComponent = () => {
  const contextValue = React.useContext(MyContext);
  return <div>{contextValue}</div>;
};

export default App;

在上述代码中，首先创建了 MyContext。在 App 组件中，通过 MyContext.Provider 提供了一个 value，这个 value 可以被其后代组件通过 React.useContext 获取。GrandChildComponent 组件使用 React.useContext(MyContext) 获取到了 App 组件中提供的 value 并进行显示。

星途面试题库

面试题：React中Context的基本使用与原理简述

知识考点

面试题答案

React中Context是什么

在项目中何时会用到它

如何创建和使用一个简单的Context