Der Kontext in React implementiert eine tiefe Datenübertragung

1. Einführung in die grundlegende Verwendung von Kontext

React useContextist eine Hooks-Funktion, die zum Übertragen von Daten zwischen Komponenten verwendet wird und so die umständliche Übertragung von Requisiten vermeidet. provid/injectEs ist dieselbe wie die in vue implementierte Funktion.

useContextDer Zweck besteht darin, ein Kontextobjekt zu erstellen, das gemeinsam genutzte Daten speichert und auf diese Daten überall im Komponentenbaum zugreifen kann.

Nehmen wir zum Beispiel an, wir haben eine UserContext, die Informationen über den aktuellen Benutzer speichert:

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>
  );
}

Im obigen Beispiel haben wir zunächst createContext()ein UserContextKontextobjekt mit erstellt.

Die gemeinsam genutzten Daten werden dann Appin der Komponente verwendet , einem Objekt namens .UserContext.Provideruser

In Profileder Komponente verwenden wir, useContext(UserContext)um auf die freigegebenen Daten zuzugreifen. Die Variablen hier usersind Objekte aus der übergeordneten AppKomponente user.

Dadurch useContextkönnen wir problemlos Daten zwischen verschiedenen Komponenten austauschen, ohne dass Daten Schicht für Schicht über Requisiten weitergegeben werden müssen.

2. Kontextanwendungsszenarien

1. Themenstil

In einer Anwendung können Sie Context verwenden, um Informationen zu Themenstilen zu übergeben, sodass verschiedene Themen dynamisch in Unterkomponenten angewendet werden können.

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. Benutzerauthentifizierung

In einer Anwendung, die eine Benutzerauthentifizierung erfordert, können authentifizierungsbezogene Informationen über Context weitergeleitet werden, um festzustellen, ob sich der Benutzer angemeldet hat, und in jeder Unterkomponente unterschiedliche Inhalte anzuzeigen.

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>
  );
}

Wie aus den obigen Beispielen ersichtlich ist, kann Context den Datentransfer zwischen Komponenten vereinfachen und die Wartbarkeit und Flexibilität des Codes verbessern. Eine übermäßige Verwendung von Context kann jedoch zu einer stärkeren Kopplung zwischen Komponenten führen. Daher sollten Sie bei der Verwendung von Context Vorsicht walten lassen.