反应 useContext. 比我们想象的容易。

- 日理万妓 2023-10-13 23:21 145阅读 0赞

在这里，我们将通过示例详细了解useContext 。我们还了解何时以及如何需要使用useContext。

我已经添加了github demo 点击这里。

useContext 钩子  
有时我们使用 props 将数据从父级传递给子级。这是一个复杂的过程，如果我们需要将它们传递给许多组件，也会很不方便。React Context API提供了一种在 React 组件树内共享数据的方法。

用法：

将数据深入传递到树中。  
覆盖树的一部分的上下文。  
优化传递对象和函数时的重新渲染。  
更新通过上下文传递的数据。  
指定后备默认值。  
useContext 可以将数据传递到我们的整个应用程序，也可以在应用程序的任何部分使用。  
句法：

const value = useContext(SomeContext)

让我们尝试使用简单的应用程序使用useContext。让我们改变一些字体大小并尝试理解它的数据流。

最后结果

图片描述

首先，我们需要使用React.createContext创建一个上下文，这个上下文将传递给钩子。我创建了一个名为 Context 的文件夹，并将文件index.js放入该文件夹中。

import {
         createContext } from "react";
    
    //initial fontSize as 16.
    const fontSizeContext = createContext(16);
    export default fontSizeContext;

在上面的代码中，我们使用了createContext并设置了初始值 16。它分配给 fontSizeContext 常量并作为默认值导出。

什么是 createContext  
它创建一个上下文对象并用于确保不同级别（树内）的每个组件都可以使用相同的上下文来获取数据。

让我们在app.js文件中进行一些更改。

import FontSizeContext from "./Context/context";
    import {
         useState } from "react";
    import UseContextExample from "./UseContextExample";
    
    const App = () => {
        
      const [size, setSize] = useState(16);
      return (
        <FontSizeContext.Provider value={
        size}>
          <div style={
        {
         width: '500px', margin: 'auto' }}>
            <UseContextExample />
    
            <button onClick={
        () => setSize(size + 5)}>Increase font size</button>
            <button
              onClick={
        () =>
                setSize((prevSize) => Math.min(prevSize - 5))
              }
            >
              Decrease font size
            </button>
          </div>
        </FontSizeContext.Provider>
      );
    };
    export default App;

在上面的代码中，我们在这里使用 Font Size Context.Provider value=\{size\} ，我们用FontSize Context.Provider包装我们的组件，并使我们的大小/值可用于树内的每个组件。

我们还添加了两个按钮，一个用于增大尺寸，另一个用于减小尺寸。每当有人单击按钮时，它都会更新其状态 并更改字体大小的值，然后传递到整个组件树。因此任何组件都可以轻松访问字体大小的值。

现在，在目录中创建一个名为UseContextExample的文件夹，创建一个名为index.js的文件，并将以下代码放入 index.js 文件中。

import {
         useContext } from "react";
    import fontSizeContext from "../Context/context";
    const UseContextExample = () => {
        
        const size = useContext(fontSizeContext);
        return <p style={
        {
         fontSize: `${
        size}px` }}>font size now {
        size}px</p>;
    };
    export default UseContextExample;

在上面的代码中，我们使用  
const size = useContext(fontSizeContext);来获取字体大小的值。该组件可以轻松访问字体大小的数据/值，因为它位于组件树内部。