【响应】尝试使用useContext

2 年 ago
科, 雅
2 minutes

useContext的使用方法

useContext是用于通过React上下文共享全局状态的工具。以下是使用useContext的基本方法。
我们将使用context来实现计数器应用程序。

1. 型别定义

import { Dispatch, SetStateAction } from "react";

export interface CounterContextProps {
  count: number;
  setCount: Dispatch<SetStateAction<number>>;
}

2. 创建提供上下文的组件

import { createContext, ReactNode, useState } from "react";
import { CounterContextType } from "../../types/counter";

const CounterContext = createContext<CounterContextType | null>(null);

const CounterProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [count, setCount] = useState<number>(0);

  const contextValue: CounterContextType = {
    count,
    setCount,
  };

  return (
    <CounterContext.Provider value={contextValue}>
      {children}
    </CounterContext.Provider>
  );
};

export { CounterContext, CounterProvider };

3. 使用useContext的组件

import React, { useContext } from "react";
import { CounterContextType } from "../../types/counter";
import { CounterContext } from "./CounterContext";

const CounterControls: React.FC = () => {
  const { count, setCount } = useContext(CounterContext) as CounterContextType;

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default CounterControls;

4. 用组件来表示

import React, { useContext } from "react";
import { CounterContext } from "./CounterContext";
import { CounterContextType } from "../../types/counter";

const CounterDisplay: React.FC = () => {
  const { count } = useContext(CounterContext) as CounterContextType;

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
};

export default CounterDisplay;

使用由App组件提供的上下文

import React from "react";
import "./App.css";
import { CounterProvider } from "./components/CounterContext/CounterContext";
import CounterControls from "./components/CounterContext/CounterControls";
import CounterDisplay from "./components/CounterContext/CounterDisplay";

const App: React.FC = () => {
  return (
    <div className="App">
      <CounterProvider>
        <CounterDisplay />
        <CounterControls />
      </CounterProvider>
    </div>
  );
};

export default App;
image.png

总结

useContext是React应用程序开发中非常强大的工具。通过使用useContext在组件之间共享状态，可以提高应用程序的可维护性和可读性。我们可以熟练地使用各种Hooks来构建更高效和易于使用的React应用程序。

本文是为初学者大学生提供了解React Next的输出资料。如果有错误或意见，请留言！

bannerAds