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时应该谨慎使用。

你可能感兴趣的:(react从入门到精通,react.js,前端,javascript)