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

我不会按问题的顺序回答.

Answer 3

如果提供程序仅为特定组件提供上下文，则应在该组件中导入并使用它.DO NOT用它包裹App.

原因是，无论何时更新提供者，每个使用者都将重新呈现，您不能使用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>
  )
}

Answer 1

答案3可以回答这个问题，在正确的位置使用上下文(对于仅使用上下文的组件.不要在应用程序级别随机使用每个上下文).如果上下文经常更新，我建议不要使用other ways，这样就可以使用React.memo、PureComponent或shouldComponentUpdate来防止不必要的重新渲染，从而优化性能.

Answer 2

订单不会影响应用程序.