nodejs32: REACT createContext

createContext

• 在 React 中，createContext 是一个函数，用于创建 Context 对象。Context 允许你在组件树中共享数据，而无需显式地通过每一级组件的 props 进行传递。它适合在应用中共享全局状态，比如认证信息、主题设置、语言选择等。

使用步骤

1. 创建 Context

import React, { createContext } from 'react';

const MyContext = createContext();

• 这会创建一个 MyContext 对象。MyContext 对象包含两个属性：
  • MyContext.Provider：用于提供数据。
  • MyContext.Consumer：用于消费数据（通常用 useContext 更方便）。

2. 提供数据：使用 Context.Provider

const App = () => {
  const value = 'Hello, World!';

  return (
    <MyContext.Provider value={value}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

• value 是要共享的数据，Provider 会将其传递给组件树中所有的消费者组件。

3. 消费数据：使用 useContext

import React, { useContext } from 'react';

const ChildComponent = () => {
  const contextValue = useContext(MyContext);
  
  return <div>{contextValue}</div>;
};

• useContext 是 React 的 Hook，用于访问 Context 中的值。它比使用 Consumer 组件更简洁。

实例

• 通过 Context 管理用户登录状态

1. 创建 Context 文件（AuthContext.js）

import React, { createContext, useState, useContext } from 'react';

// 创建 Context
const AuthContext = createContext();

// 创建 Provider 组件
export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const logIn = (username) => setUser({ name: username });
  const logOut = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, logIn, logOut }}>
      {children}
    </AuthContext.Provider>
  );
};

// 创建自定义 Hook 用于使用 AuthContext
export const useAuth = () => useContext(AuthContext);

2. 在应用中使用 Context

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { AuthProvider } from './AuthContext';

ReactDOM.render(
  <AuthProvider>
    <App />
  </AuthProvider>,
  document.getElementById('root')
);

App.js

import React from 'react';
import { useAuth } from './AuthContext';

const App = () => {
  const { user, logIn, logOut } = useAuth();

  return (
    <div>
      {user ? (
        <div>
          <h1>Welcome, {user.name}!</h1>
          <button onClick={logOut}>Log out</button>
        </div>
      ) : (
        <button onClick={() => logIn('Alice')}>Log in as Alice</button>
      )}
    </div>
  );
};

export default App;