ReactJS 中的 Context API

reactjsweb developmentfront end technology更新于 2026/1/26 17:52:17

在本文中，我们将了解如何在基于类的组件中访问数据，而无需将其传递给每个父组件。

Context API 用于设置全局数据，现在可以在任何子组件中访问这些数据，而无需将其传递给每个父组件。

示例

假设有三个组件，分别是 A、B 和 C。A 是 B 的父组件，B 是 C 的父组件。因此，我们的组件结构如下 − A→B→C。

我们在 A 中定义了一些数据，并希望在组件 C 中处理这些数据。因此有两种方法可以解决这个问题 −

要么将这些数据通过 B 传递给 C，但这并非最佳方法。
另一种方法是使用 Context API，它用于集中处理数据，任何组件都可以访问这些数据，而无需将其传递给每个父组件。

在本例中，我们将构建一个身份验证 React 应用程序，该应用程序在子组件中登录或注销用户，并相应地更新状态。

我们将构建一个包含两个 LogIn 和 LogOut 组件的 App 组件，它们访问 Context 提供程序提供的状态并相应地更新状态。

AuthContext.js

import React from 'react';

const authContext = React.createContext({
   auth: null,
   login: () => {},
   logout: () => {},
});

export default authContext;

App.jsx

import React, { useState } from 'react';
import LogIn from './Login';
import LogOut from './Logout';
import AuthContext from './AuthContext';

const App = () => {

   const [auth, setAuth] = useState(false);
   const login = () => {
      setAuth(true);
   };
   const logout = () => {
      setAuth(false);
   };
   return (
      <React.Fragment>
      <AuthContext.Provider
      value={{ auth: auth, login: login, logout: logout }}
      <p>{auth ? 'Hi! You are Logged In' : 'Oope! Kindly Login'}
      <LogIn />
      <LogOut />
      </AuthContext.Provider>
      </React.Fragment>
   );
};
export default App;

Login.js

import React, { Component } from 'react';
import AuthContext from './AuthContext';

class Login extends Component {
   static contextType = AuthContext;
   render() {
      return (
      <div>
      <button onClick={this.context.login}>Login</button>
      </div>
      );
   }
}
export default Login;

Logout.js

import React, { Component } from 'react';
import AuthContext from './AuthContext';

class Logout extends Component {
   static contextType = AuthContext;
   render() {
      return (
      <div>
      <button onClick={this.context.logout}>Logout</button>
      </div>
      );
   }
}

export default Logout;