javascript - 在 React 中连接上下文提供程序的推荐模式？

Question

我有一个 React 应用程序，使用多个上下文提供程序将数据传递给组件，类似于以下（简化）代码。

下面是一个上下文提供者的示例，它使用来自另一个提供者的上下文：

import React from 'react'
import {useAuth} from './auth-context'

const UserContext = React.createContext()

function UserProvider(props) {
  const {
    data: {user},
  } = useAuth()
  return <UserContext.Provider value={user} {...props} />
}

function useUser() {
  const context = React.useContext(UserContext)
  if (context === undefined) {
    throw new Error(`useUser must be used within a UserProvider`)
  }
  return context
}

export {UserProvider, useUser}

以下是嵌套的上下文提供程序，一起导出：

import React from 'react'
import {AuthProvider} from './auth-context'
import {UserProvider} from './user-context'

function AppProviders({children}) {
  return (
    <AuthProvider>
      <UserProvider>{children}</UserProvider>
    </AuthProvider>
  )
}

export default AppProviders

以下是连接到应用程序的提供程序。<App />包含所有应用程序组件：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
import AppProviders from './context'

ReactDOM.render(
  <AppProviders>
    <App />
  </AppProviders>,
  document.getElementById('root'),
)

是否有推荐的模式来为您的 React 应用程序提供对多个上下文提供者的访问权限？是这个吗？

第二个问题：当上下文提供者不依赖于另一个时，这会影响你的推荐吗？例如，如果UserProvider上例中的 不依赖于AuthProvider而是看起来像这样：

import React from 'react'
import userClient from './userClient'

const UserContext = React.createContext()

function UserProvider(props) {
  const [ user, setUser ] = React.useState(null);
  return (
    <UserContext.Provider value={user} {...props} />
  );
}

function useUser() {
  const context = React.useContext(UserContext)

  if (context === undefined) {
    throw new Error(`useUser must be used within a UserProvider`)
  }
  return context
}

function loadUser() {
  return userClient.loadUser().then(data => {
    setUser(data);
  });
}


export {UserProvider, useUser, loadUser}

在这个（第二个）场景中，保持UserProvider嵌套AuthProvider与分离提供者以及它们在组件层次结构中的呈现位置是否存在缺点？

标签： javascriptreactjsreact-hooksreact-context