Question

我正在研究video

来探索useContext react hook

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

context.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;

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

那么使用useContext有什么好处？或是我误会了视频。

有人可以帮我吗？

Answer 1

它避免了螺旋钻。当您有4个或5个嵌套组件时，通过props传递数据是很糟糕的，这只是一个小例子。 Context使您可以从应用程序中的任何位置获取数据，而且还提供了一种很好的方法来使用dispatch或useReducer之类的其他方法进行管理。

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

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

1 个答案: