将什么组合在一起的主要考虑（从性能的角度来看）不是关于哪些一起使用，而更多关于哪些一起改变。对于大多数情况下（或至少很少）设置到上下文中的事物，您可能可以将它们全部放在一起而不会出现任何问题。但是如果有一些更频繁地混合在这种变化中的东西，可能值得将它们分开。

例如，deviceTheme对于给定的用户，我希望它是相当静态的，并且可能被大量组件使用。我猜这popup可能是在管理有关您当前是否打开了弹出窗口的某些信息，因此它可能会随着与打开/关闭弹出窗口相关的每个操作而改变。如果popup和deviceTheme捆绑在同一个上下文中，那么每次popup更改都会导致所有依赖的组件deviceTheme也重新渲染。所以我可能会有一个单独的PopupContext. windowSize并且windowScroll可能有类似的问题。什么确切的使用方法可以深入到意见领域，但是您可以AppContext为不经常变化的部分提供一个更具体的上下文，然后为更频繁变化的事物提供更具体的上下文。

下面的 CodeSandbox 演示了 useState 和 useContext 之间的交互，上下文分为几种不同的方式和一些按钮来更新上下文中保存的状态。

您可以转到此 URL以在完整的浏览器窗口中查看结果。我鼓励您首先了解结果的工作原理，然后查看代码并在您想了解其他场景时对其进行试验。

这个答案已经很好地解释了如何构建上下文以提高效率。但最终目标是让上下文消费者仅在需要时更新。这取决于具体的情况，最好使用单个还是多个上下文。

在这一点上，这个问题对于大多数全局状态 React 实现来说是常见的，例如 Redux。一个常见的解决方案是仅在需要时使用React.PureComponent,React.memo或shouldComponentUpdatehook使消费者组件更新：

const SomeComponent = memo(({ theme }) => <div>{theme}</div>);

...

<AllContext>
  {({ deviceTheme }) => <SomeComponent theme={deviceTheme}/>
</AllContext>

SomeComponent将仅在deviceTheme更新时重新渲染，即使上下文或父组件已更新。这可能是也可能不是可取的。

Ryan 的回答很棒，您应该在设计如何构建上下文提供程序层次结构时考虑这一点。

我提出了一个解决方案，您可以使用该解决方案更新 provider 中的多个值，并具有多个useStates

例子 ：

const TestingContext = createContext()


const TestingComponent = () => {
    const {data, setData} = useContext(TestingContext)
    const {value1} = data
    return (
        <div>
            {value1} is here
            <button onClick={() => setData('value1', 'newline value')}>
                Change value 1
            </button>
        </div>
    )
}

const App = () => {
    const values = {
        value1: 'testing1',
        value2: 'testing1',
        value3: 'testing1',
        value4: 'testing1',
        value5: 'testing1',
    }

    const [data, setData] = useState(values)

    const changeValues = (property, value) => {
        setData({
            ...data,
            [property]: value
        })
    }

    return (
        <TestingContext.Provider value={{data, setData: changeValues}}>
            <TestingComponent/>
            {/* more components here which want to have access to these values and want to change them*/}
        </TestingContext.Provider>
    )
    }

您仍然可以将它们组合起来！如果您关心性能，可以更早地创建对象。我不知道您使用的值是否会发生变化，如果没有变化，这很容易：

state = {
  allContextValue: {
    setProfile,
    profileReload,
    deviceTheme,
    setDeviceTheme,
    clickEvent,
    usePopup,
    popup,
    windowSize
  }
}

render() {
  return <AllContext.Provider value={this.state.allContextValue}>...</AllContext>;
}

每当您想要更新您需要执行的任何值时，我都喜欢这样做，但是：

this.setState({
  allContextValue: {
    ...this.state.allContextValue,
    usePopup: true,
  },
});

这将既高效又相对容易:) 将它们拆分可能会加快一点，但我只会在您发现它实际上很慢时才这样做，并且仅适用于您的上下文中具有很多消费者。

不过，如果你的value没有太大变化，那就真的没有什么可担心的。