面试题：React中Context跨组件通信的基本使用

Question

请描述在React中如何使用Context实现跨组件通信，以一个简单的父子组件嵌套结构为例，展示创建Context、在父组件中提供数据以及在子组件中消费数据的代码步骤。

Answer 1

1. 创建Context：

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

2. 在父组件中提供数据：

   import React from'react';
   import MyContext from './MyContext';
   
   const ParentComponent = () => {
     const contextValue = {
       message: 'Hello from parent'
     };
     return (
       <MyContext.Provider value={contextValue}>
         <ChildComponent />
       </MyContext.Provider>
     );
   };
   
   const ChildComponent = () => {
     return <div>Child component</div>;
   };
   
   export default ParentComponent;
   

3. 在子组件中消费数据：

   import React from'react';
   import MyContext from './MyContext';
   
   const ChildComponent = () => {
     const context = React.useContext(MyContext);
     return <div>{context.message}</div>;
   };
   
   export default ChildComponent;
   

在上述代码中，首先使用React.createContext()创建了一个MyContext。在ParentComponent中通过MyContext.Provider将数据（这里是contextValue）传递下去。在ChildComponent中，通过React.useContext(MyContext)获取到ParentComponent传递下来的数据并使用。