Context使用

Context API 是 React 提供的一种用于跨组件层级共享数据的方法，它可以用来实现兄弟组件之间的通信。通常情况下，兄弟组件之间的通信需要通过它们的共同父组件来实现，而 Context API 则可以帮助我们避免将数据逐层传递到每一个中间组件。

实现步骤：

1. 创建 Context 对象

   首先，我们需要创建一个 Context 对象。这个对象通过 React.createContext() 方法创建，并且可以传入一个默认值。

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

2. 提供数据

   将数据提供给 Context，通常是在应用的顶层组件（或者是最合适的共享数据的组件）中使用 Context.Provider 组件来包裹子组件，并通过 value 属性传递数据。

   function ParentComponent() {
     const sharedData = "This is shared data";
   
     return (
       <MyContext.Provider value={sharedData}>
         <ChildComponent1 />
         <ChildComponent2 />
       </MyContext.Provider>
     );
   }
   

3. 消费数据

   子组件可以通过 useContext 钩子或者 MyContext.Consumer 来访问 Context 中的数据。

   • 使用 useContext 钩子：

     function ChildComponent1() {
       const data = useContext(MyContext);
     
       return <p>Child Component 1: {data}</p>;
     }
     

   • 使用 MyContext.Consumer：

     function ChildComponent2() {
       return (
         <MyContext.Consumer>
           {(data) => <p>Child Component 2: {data}</p>}
         </MyContext.Consumer>
       );
     }
     

注意事项：

• 多个 Context 使用： 如果你的应用中有多个需要共享的数据，可以创建多个 Context 对象，并通过 Provider 提供不同的值。

• 性能考虑： Context 的值发生变化时，会导致所有消费者组件重新渲染。因此，需要注意在设计时避免不必要的重新渲染。

• 嵌套使用： Context 可以嵌套使用，内部的消费者组件可以访问外部 Context 提供的数据。

通过上述步骤，我们可以在 React 应用中实现兄弟组件之间的数据传递与通信。