在 React hooks 中传递状态与使用上下文

Question

我通过观看这个视频来探索 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 传递数据是很糟糕的，而且这只是一个小例子。Context 将允许您从应用程序中的任何位置获取数据，而且还提供了一种使用其他方法（如dispatch或 ）来管理数据的好方法useReducer。

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