在 ReactJS 中的组件之间共享状态的最佳方式

Question

我目前已经设置了一个 React 上下文来共享状态，当前版本如下所示：

QueryContext.js

import { createContext } from "react";

const queryContext = createContext({
    query: "",
    setQuery: (value) => {},
});

export default queryContext;

应用程序.js

import React, { useState } from "react";

import QueryContext from "./contexts/QueryContext";

import Header from "./Header";
import Nav from "./Nav";
import Main from "./Main";
import Footer from "./Footer";

const App = () => {
    const [query, setQuery] = useState("");

    return (
        <>
            <QueryContext.Provider value={{ query, setQuery }}>
                <Header />
            </QueryContext.Provider>
                <Nav />
            <QueryContext.Provider value={{ query, setQuery }}>
                <Main />
            </QueryContext.Provider>
            <Footer />
        </>
    );
};

export default App;

由于Nav位于Header和Main之间，因此别无选择，只能用单独的提供程序包装它们。

我应该只使用道具而不是像下面这样的上下文吗？

应用程序.js

import React, { useState } from "react";

import Header from "./Header";
import Nav from "./Nav";
import Main from "./Main";
import Footer from "./Footer";

const App = () => {
    const [query, setQuery] = useState("");

    return (
        <>
            <Header value={{ query, setQuery }} />
            <Nav />
            <Main value={{ query, setQuery }} />
            <Footer />
        </>
    );
};

export default App;

Answer 1

上下文是允许开发人员通过应用程序树的许多级别传递数据的技术。 这里首先要记住的是 - 如果某物是全局的，它可能应该放在上下文中并从任何级别较低的地方访问。 使用属性通过多个级别传递数据可能是不好的做法 - 代码质量可能会随着性能而下降。

我假设，在您的情况下，最好制作上下文（您已经做过 - QueryContext ）并将其放置在允许的最高位置：

import React, { useState } from "react";

import QueryContext from "./contexts/QueryContext";

import Header from "./Header";
import Nav from "./Nav";
import Main from "./Main";
import Footer from "./Footer";

const App = () => {
    const [query, setQuery] = useState("");

    return (
        <QueryContext.Provider value={{ query, setQuery }}>
            <Header />
            <Nav />
            <Main />
            <Footer />
        </QueryContext.Provider>
    );
};

export default App;

所有需要来自QueryContext的数据的组件都可以通过useContext(QueryContext)提取它。 作为对 props 方式的奖励——你可以将Header和Main组件放置到你想要的深度，它们仍然可以访问上下文。

在我看来，这里最好的解决方案是为每个使用查询的组件实现 2 个组件：第一个组件将使用 props，第二个组件使用上下文，但你可能不需要它，只要它可能是过度工程。 这是示例：

interface Props {
  query: string;
  setQuery: (value: string) => void;
}

function Header(props: Props) {
  return (...);
}

function HeaderConnected() {
  const {query, setQuery} = useContext(QueryContext);

  return <Header query={query} setQuery={setQuery}/>
}

这种组件分离方式为开发者提供了两种灵活的组件使用方式。 您可以对附加到 Redux 存储的组件执行相同的操作——编写它们的纯变体以及“连接”到存储。

我在这里对您的代码的评论：

1. 在您的情况下，无需创建多个具有相同值的相同级别的上下文提供程序。 使其成为单一的并移动到上层。
2. 在我看来，没有必要制作包含查询及其设置器的value这样的道具。 这是相当不清楚的，这些value是什么并且似乎应该从某个全局范围（上下文）中提取这些值，但这取决于任务上下文。