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内与将提供程序分开以及它们在组件层次结构中的呈现位置相比有缺点吗？

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

0 个答案: