如何使用上下文在 React 组件之间共享状态？

在一个小型应用程序中，React Context 和 useState 是共享状态或简单地在组件周围传递数据而不改变它的最佳方式。

上下文：它提供了一种在组件之间共享值的方法，而无需通过树的每一层显式传递一个 prop。

React useState Hook ：它是一个允许您在功能组件中拥有状态变量的 Hook。您将初始状态传递给此函数，它返回一个具有当前状态值（不一定是初始状态）的变量和另一个更新该值的函数。

示例：使用 useState 钩子演示 React 上下文的程序。在这个例子中，我们有两个按钮增加和减少来改变计数变量和一个按钮来移动到另一个页面并查看更新的计数值。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app example

第 2 步：创建项目文件夹（即示例）后，使用以下命令移动到该文件夹：

cd example

项目结构：它看起来像这样：

这里 ComponentTwo 嵌套在 ComponentOne 中，而 ComponentOne 嵌套在 PageOne 中。我们想更改 ComponentTwo.js 中的 count 变量并传递数据以查看 PageTwo.js 文件中的更新值。因此，在不通过 prop 手动传递数据的情况下，我们将在 useContext 和 useState 的帮助下全局创建变量。

演示上述示例的步骤：

Step1: 创建上下文 使用 createContext() 方法创建上下文。

句法：

const Context = React.createContext();

第 2 步：创建数据集

现在我们有了一组需要全局存储的数据，以便可以通过任何组件访问它。因此在Context.js文件中编写以下代码：

Context.js

import React, { useState } from "react";
  
export const Context = React.createContext();
export const ContextProvider = ({ children }) => {
    const [items, setItems] = useState(0);
  
    return (
        
            {children}
        
    );
};

在此代码中，使用 useState 挂钩和 On Context 创建数据。 Provider，我们把我们想要传递给整个组件树的值。我们将其设置为等于 value 属性来执行此操作。在这种情况下，值 = {{items,setItems}}。

Step3：包装应用程序组件。

在尝试访问我们项目中的上下文值之前，请使用 Context.Provider 文件包装 app.js 文件。转到项目中的index.js文件并编写以下代码：

index.js

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { ContextProvider } from './Context';
  
ReactDOM.render(,
document.getElementById('root'));

第 4 步：访问和更新上下文

现在项目的任何组件都可以访问更新和使用全局变量。为了在子组件中使用 Context，我们需要使用 useContext Hooks 来访问它。

组件二.js

import React, { useContext } from "react";
import { useNavigate } from "react-router-dom";
import { Context } from "../Context";
  
function ComponentTwo() {
    const navigate = useNavigate();
    const { items, setItems } = useContext(Context);
      
    const clickHandler = () => {
        setItems((prevcount) => prevcount + 1);
    };
      
    const clickHandlerOne = () => {
        setItems((prevcount) => prevcount - 1);
    };
      
    const HandlerOne = () => {
        navigate("/pagetwo");
    };
      
    return (
        

            Increase
            Count:{items}
            Decrease
            

                Move to Page Two
            
        
    );
}
  
export default ComponentTwo;

第 6 步：从其他组件访问变量。

PageTwo.js

import React, { useContext } from "react";
import { useNavigate } from "react-router-dom";
import { Context } from "../Context";
  
function PageTwo() {
    const navigate = useNavigate();
    const { items, setItems } = useContext(Context);
    const handlertwo = () => {
        navigate("/");
    };
      
    return (
        

            
Welcome to Page Two
            Updated new value Count:{items}
            

                Move to Page One
            
        
    );
}
  
export default PageTwo;

应用程序.js

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import PageTwo from "./pages/PageTwo";
import PageOne from "./pages/PageOne";
  
function App() {
    return (
        

            
                
                    } />
                    } />
                
            
        
    );
}
  
export default App;

运行应用程序的步骤：使用以下命令运行应用程序：

npm start

输出：现在，打开 URL http://localhost:3000/，您将看到以下输出。

结论：使用 React Context 和 Hooks 通过嵌套子组件共享数据的简单且可扩展的方法，无需将任何状态或数据道具传递给子组件。