面试题：React中useContext Hook的基本应用场景

Question

请描述在React项目中，哪些常见场景会使用到useContext Hook，并举例说明如何通过useContext来实现跨组件数据传递。

Answer 1

常见场景

1. 全局配置：如应用的主题（亮色/暗色模式）、语言设置等，这些配置可能在多个层级的组件中需要使用，若通过props层层传递会十分繁琐。
2. 用户认证信息：在整个应用中，许多组件可能需要知道用户是否已登录、用户的基本信息等，使用useContext可方便地共享这些认证相关数据。
3. 多步骤表单：表单的不同步骤组件可能需要共享一些全局的表单数据，如用户填写的基本信息等，避免通过props在多个组件间传递。

示例

1. 创建Context：

   import React from 'react';
   
   // 创建Context
   const MyContext = React.createContext();
   
   export default MyContext;
   

2. 提供Context数据：

   import React from'react';
   import MyContext from './MyContext';
   
   const App = () => {
       const data = { message: 'Hello from context' };
       return (
           <MyContext.Provider value={data}>
               {/* 应用的其他组件 */}
               <ChildComponent />
           </MyContext.Provider>
       );
   };
   
   const ChildComponent = () => {
       return <GrandChildComponent />;
   };
   
   const GrandChildComponent = () => {
       // 使用useContext获取数据
       const contextData = React.useContext(MyContext);
       return <div>{contextData.message}</div>;
   };
   
   export default App;
   

在上述示例中，App组件通过MyContext.Provider提供了数据，深层的GrandChildComponent组件通过useContext获取到了该数据，实现了跨组件数据传递。