React createContext 与 useContext 的基本使用

import React, { useContext } from 'react';
 
// 创建一个新的上下文对象
const UserContext = React.createContext();
 
// 使用UserProvider组件包裹应用的根部，提供共享的用户状态
const UserProvider = ({ children }) => {
  const user = { name: 'John Doe', id: 123 };
  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
};
 
// 使用UserConsumer直接消费上下文数据
const UserConsumer = () => (
  <UserContext.Consumer>
    {user => <div>Hello, {user.name}!</div>}
  </UserContext.Consumer>
);
 
// 使用hooks方式消费上下文数据
const HooksComponent = () => {
  // 使用useContext钩子获取上下文值
  const user = useContext(UserContext);
  return <div>Hello, {user.name}!</div>;
};
 
// 应用的根组件
const App = () => (
  <UserProvider>
    <UserConsumer />
    <HooksComponent />
  </UserProvider>
);
 
export default App;

这个代码示例展示了如何在React应用中使用createContext和useContext来提供和消费上下文数据。UserProvider组件使用UserContext.Provider来提供一个用户状态，然后两种不同的方式来消费这个上下文：一种是使用UserContext.Consumer，另一种是使用hooks方式useContext。这样，在应用中的任何地方都可以访问到用户状态，无需通过props传递数据。