reactjs - 在 React Native 中使用多个上下文提供程序的更好方法

Question

我有一个应用程序，我在其中使用 3 Context Provider .要使应用程序正常工作，我必须包装 <App/>在所有这些providers .随着我的应用程序的增长，我希望有更多的提供程序来处理我必须连接的更多类型的数据。我已经开始觉得可能有更好的方法将提供者传入 <App /> .

我的 App.js代码:

import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import { Provider as BlogProvider} from './src/context/BlogContext';
import { Provider as VehicleProvider} from './src/context/VehicleContext';
import { Provider as AuthProvider} from './src/context/AuthContext';

import IndexScreen from './src/screens/IndexScreen';
import ShowScreen from './src/screens/ShowScreen';
import CreateScreen from './src/screens/CreateScreen';
import EditScreen from './src/screens/EditScreen';
import VehicleScreen from './src/screens/VehicleScreen';

const navigator = createStackNavigator(
  {
    Index: IndexScreen,
    Show: ShowScreen,
    Create: CreateScreen,
    Edit: EditScreen,
    Debug: DebugScreen,
    Vehicle: VehicleScreen,

  },
  {
    initialRouteName: 'Index',
    defaultNavigationOptions: {
      title: 'Main'
    }
  }
);

const App = createAppContainer(navigator);

export default () => {
  return (
    <BlogProvider>
      <VehicleProvider>
        <AuthProvider>
             <App />
        </AuthProvider>
      </VehicleProvider>
    </BlogProvider>
  );
};

我的一些问题是:

有没有更好的方法在应用程序中使用多个上下文提供程序。

这些提供程序的嵌套顺序对应用程序有什么影响吗？

我们可以跳过在 <App/> 中添加提供者吗？而是将它们导入任何需要的屏幕并将该屏幕元素包装在其中？

Answer 1

我不会按顺序回答。
答案 3
如果提供者仅为特定组件提供上下文，则应在该组件中导入和使用它。 不要包装App用它。
原因是每当provider更新时，每个consumer都会被重新渲染，你不能没有用React.memo或 ReactPureComponent或 shouldComponentUpdate阻止它。 You should not overuse context

const Root = () => {
  return (
    <AppProvider>
      <ComponentProvider>
        <App/>
      <ComponentProvider>
    </AppProvider>
  )
}

const App = () => {
  return (
    <>
      <ComponentA/>
      <ComponentB/>
    <>
  )
}

const ComponentContext = createContext()
const ComponentProvider = ({ children }) => {
  // If any value here is updated --> all consumer will be render
  // --> App re-render --> ComponentA and ComponentB re-render
  return (
    <ComponentContext.Provider value={{ value1, value2, value }}>
      {children}
    </ComponentContext.Provider>
  )
}

你应该这样做

const Root = () => {
  <AppProvider>
    <App/>
  </AppProvider>
}

const App = () => {
  return (
   <>
    <ComponentA/>
    <ComponentB/>
   <>
  )
}

const ComponentA = () => {
  return (
    <ComponentProvider>
      <OtherComponent/>
    <ComponentProvider>
   )
}

const ComponentContext = createContext()
const ComponentProvider = ({ children }) => {
  // If any value here is updated --> all consumer (ComponentA only) will be render
  return (
    <ComponentContext.Provider value={{ value1, value2, value3 }}>
      {children}
    </ComponenContext.Provider>
  )
}

答案 1
答案 3 可以解决这个问题，在正确的位置使用上下文(对于仅使用上下文的组件。不要在应用程序级别随机使用每个上下文)。如果您的上下文经常更新，我建议不要使用 other ways所以你可以使用 React.memo或 PureComponent或 shouldComponentUpdate防止不必要的重新渲染以优化性能。
答案 2
该订单不会影响应用程序。