react context初探 | 青训营笔记

管理状态是在 React 中开发应用程序的重要部分。管理状态的一种常见方法是传递道具。传递 props 意味着将数据从一个组件发送到另一个组件。这是确保数据到达 React 应用程序中正确位置的好方法。

React 提供了一个称为context API 的内置功能，可以帮助将数据“传送”到需要它的组件，而无需传递 props。

在 React 中，传递 props 是一个基本概念，它使父组件能够与其子组件以及应用程序中的其他组件共享数据。

在许多情况下，传递 props 是在应用程序的不同部分之间共享数据的有效方式。但是，将 props 沿多个组件链向下传递以到达特定组件会使代码过于繁琐。

context API 的工作原理

Context API 允许数据通过组件树传递，而无需在每个级别手动传递 props。这使得在组件之间共享数据变得更加容易。

MyContext.js在文件夹中创建一个名为的新文件src并添加以下代码以创建上下文对象：

import { createContext } from 'react';

export const MyContext = createContext("");

如何在 Context API 中使用 Provider 包装组件：

// Create a parent component that wraps child components with a Provider

import { useState, React } from "react";
import { MyContext } from "./MyContext";
import MyComponent from "./MyComponent";

function App() {
  const [text, setText] = useState("");

  return (
    <div>
      <MyContext.Provider value={{ text, setText }}>
        <MyComponent />
      </MyContext.Provider>
    </div>
  );
}

export default App;

在这个例子中，我们有一个名为 App 的父组件。这个组件有一个名为“text”的状态变量，它最初被设置为一个空字符串。我们还定义了一个名为的函数setText，可用于更新 的值text。

在 App 组件的返回语句中，我们用提供者组件（“MyContext.Provider”）包装了该组件的子组件。然后我们将一个对象传递给包含“文本”和“setText”值的提供程序组件的值属性。

使用 React 中的“useContext” hook。

import { useContext } from 'react';
import { MyContext } from './MyContext';

function MyComponent() {
  const { text, setText } = useContext(MyContext);

  return (
    <div>
      <h1>{text}</h1>
      <button onClick={() => setText('Hello, world!')}>
        Click me
      </button>
    </div>
  );
}

export default MyComponent;