reactjs - 在 react Hook 中传递状态与使用上下文

Question

我通过浏览这个 video 来探索 useContext react 钩子(Hook)

在这个视频中，他们所做的基本上是创建一个上下文

上下文.js

import { createContext } from "react";

export const CustomerContext = createContext(null);

并将这些上下文传递给子组件

import Table from "./components/table";
import React, { useState } from "react";
import { CustomerContext } from "./context";
const App = () => {
  const [user, setUser] = useState(null);
  return (
    <div>
      <p> Hello World</p>
      <CustomerContext.Provider value={{ user, setUser }}>
        <Table />
      </CustomerContext.Provider>
    </div>
  );
};

export default App;

然后在子组件中获取值或者改变值

import { CustomerContext } from "./../context";
import React, { useContext } from "react";

const Table = () => {
  const { user, setUser } = useContext(CustomerContext);

  return (
    <div>
      <p onClick={() => setUser("Rohit")}>Current User: {user}</p>
    </div>
  );
};

export default Table;

这也可以通过简单地将状态作为 props 传递给子组件来实现。

那么使用useContext有什么好处呢？或者我误解了视频。

有人可以帮我吗？

Answer 1

避免螺旋钻。当你有 4 或 5 个嵌套组件时通过 props 传递数据是很糟糕的，这只是一个小案例。上下文将允许您从应用程序中的任何位置获取数据，但也提供了一种使用其他方法(如 dispatch 或 useReducer)管理数据的好方法。

此外，React 提供的 ContextApi 允许您创建多个上下文来分离您的关注点，我认为当您有大量数据时这非常酷。