react useContext钩子函数

需求：

        可配置系统Logo,

实现：

        1、封装Logo组件

        2、配置提交图片后给Logo组件传递状态

        3、Logo组件接收到状态，调用接口更新Logo

技术点：

        两个组件共享状态

技术实现：

        redux,dav,useContext都可

下面是useContext函数实现过程，其他方式原理一样，且更加简便

1. 根组件使用创建的Context对象包裹

2. // src/context/AppContext.tsx
   import { createContext } from 'react';
   
   const AppContext = createContext();
   
   export default AppContext;
   
   

   // src/app.tsx   根组件使用AppContext.Provider包裹 提供状态  并且定义值 一般是键值对 可以为布尔值
   import React, { useState } from 'react';
   import AppContext from './AppContext';
   import ComponentA from './ComponentA';
   import ComponentB from './ComponentB';
   
   const App = () => {
     const [isFlag, setIsFlag] = useState(false);
   
     return (
       <AppContext.Provider value={{ isFlag, setIsFlag }}>
         <ComponentA />
         <ComponentB />
       </AppContext.Provider>
     );
   };
   
   export default App;
   
   

3. // src/ComponentB   组件B   消费者（接收状态的组件）
   import React from 'react';
   import AppContext from './AppContext';
   
   const ComponentB = () => {
     return (
       <AppContext.Consumer>
         {({ isFlag, setIsFlag }) => (
           <div>
             <p>Component A</p>
             <p>Flag: {isFlag ? 'true' : 'false'}</p>
             <button onClick={() => setIsFlag(!isFlag)}>Toggle Flag</button>
           </div>
         )}
       </AppContext.Consumer>
     );
   };
   
   export default ComponentB;
   
   使用 `useContext` 钩子方式：
   import React, { useContext } from 'react';
   import AppContext from './AppContext';
   
   const ComponentB = () => {
     const { isFlag, setIsFlag } = useContext(AppContext);
   
     return (
       <div>
         <p>Component A</p>
         <p>Flag: {isFlag ? 'true' : 'false'}</p>
         <button onClick={() => setIsFlag(!isFlag)}>Toggle Flag</button>
       </div>
     );
   };
   
   export default ComponentB;
   
   

4. 在接收状态的组件中，更新共享状态：

   • 在接收状态的组件中，通过调用提供状态的组件中传递的 setIsFlag 方法来更新共享状态。