react中createContext以及useContext的使用

import React, { useContext } from 'react';
 
// 创建一个新的上下文对象
const UserContext = React.createContext();
 
// 使用UserProvider组件包裹应用的根部，提供共享的用户状态
const UserProvider = ({ children }) => {
  const [user, setUser] = React.useState(null);
 
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};
 
// 使用UserConsumer组件来消费共享的用户状态
const UserConsumer = ({ children }) => {
  return (
    <UserContext.Consumer>
      {context => children(context)}
    </UserContext.Consumer>
  );
};
 
// 使用useContext钩子在函数组件中消费共享的用户状态
const useUser = () => {
  return useContext(UserContext);
};
 
// 示例：如何使用
const App = () => {
  return (
    <UserProvider>
      <Content />
    </UserProvider>
  );
};
 
const Content = () => {
  const { user, setUser } = useUser();
 
  // 使用user和setUser
  return (
    <div>
      <h1>User Name: {user ? user.name : 'Unknown'}</h1>
      {/* 其他内容 */}
    </div>
  );
};
 
export default App;

这个代码示例展示了如何在React应用中创建一个上下文提供者UserProvider，它允许其他组件共享用户状态。还展示了如何使用useContext钩子在函数组件中消费共享状态。这是一个简化的例子，实际应用中可能需要更复杂的逻辑。