react中的context实现深层传递数据

一、context基本使用介绍

React中的useContext是一个Hooks函数，用于在组件之间传递数据，避免了繁琐的props传递。就和vue中的provid/inject实现的功能是一样的。

useContext的作用是创建一个上下文对象，用于存储共享的数据，并且在组件树中的任何位置都可以访问该数据。

举例来说，假设我们有一个UserContext用于存储当前用户的信息：

import {
    
    createContext, useContext} from 'react'
// 创建一个上下文对象
const UserContext = createContext();

// 在父组件中提供共享的数据
function App() {
    
    
  const user = {
    
     name: "John", age: 25 };

  return (
    <UserContext.Provider value={
    
    user}>
      <Profile />
    </UserContext.Provider>
  );
}

// 在子组件中消费共享的数据
function Profile() {
    
    
  // 在需要使用共享数据的组件中通过useContext访问数据
  const user = useContext(UserContext);

  return (
    <div>
      <h2>{
    
    user.name}</h2>
      <p>{
    
    user.age} years old</p>
    </div>
  );
}

在上面的例子中，我们首先使用createContext()创建了一个UserContext上下文对象。

然后，在App组件中使用UserContext.Provider提供了共享的数据，即一个名为user的对象。

在Profile组件中，我们使用useContext(UserContext)来访问共享的数据。这里的user变量就是来自父组件App中的user对象。

通过使用useContext，我们可以轻松地在不同的组件之间共享数据，而不需要通过props一层层传递数据。

二、context应用场景

1. 主题样式

在一个应用中，可以使用Context来传递主题样式相关的信息，以便在子组件中动态应用不同的主题。

const ThemeContext = React.createContext('light');

function App() {
    
    
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
    
    
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
    
    
  const theme = useContext(ThemeContext);
  return <button style={
    
    {
    
     background: theme }}>Button</button>;
}

2. 用户认证

在一个需要用户认证的应用中，可以通过Context传递认证相关的信息，以便在各个子组件中判断用户是否已登录，显示不同的内容。

const AuthContext = createContext();

function AuthProvider({
     
      children }) {
    
    
  const [user, setUser] = useState(null);
  
  const login = (username, password) => {
    
    
    // 用户登录逻辑
    setUser({
    
     username });
  };
  
  const logout = () => {
    
    
    // 用户退出登录逻辑
    setUser(null);
  };
  
  return (
    <AuthContext.Provider value={
    
    {
    
     user, login, logout }}>
      {
    
    children}
    </AuthContext.Provider>
  );
}

function App() {
    
    
  return (
    <AuthProvider>
      <Navbar />
      <Content />
    </AuthProvider>
  );
}

function Navbar() {
    
    
  const {
    
     user, logout } = useContext(AuthContext);
  return (
    <nav>
      {
    
    user ? (
        <div>
          Hello, {
    
    user.username}!
          <button onClick={
    
    logout}>Logout</button>
        </div>
      ) : (
        <div>Please login</div>
      )}
    </nav>
  );
}

通过上述例子可以看出，Context能够简化组件之间的数据传递，提高代码的可维护性和灵活性。然而，过度使用Context可能会导致组件之间的耦合性增加，所以在使用Context时应该谨慎使用。