如何获取同一Context下嵌套多层Provider的所有可用值

你遇到的问题是同一个Context的嵌套Provider默认采用完全覆盖逻辑，不会自动合并不同层级的value，要实现优先内层、缺省回退外层的效果，只需调整内层Provider的实现逻辑即可：

核心思路 #

在内层ContextXProviderTwo中先消费外层Provider提供的Context值，将外层值与内层自定义值做合并，内层值放在对象展开的最后侧覆盖外层同名属性，再把合并后的值传给内层Provider的value属性。

代码实现 #

1. 基础版实现 #

import { createContext, useContext } from 'react'

// 首先定义你的Context
const ContextX = createContext({})

// 外层Provider正常实现即可
function ContextXProviderOne({ children }) {
  // 外层的10个state + 10个methods
  const contextValue = {
    state1: xxx,
    state2: xxx,
    // ...其余7个state
    method1: () => {},
    method2: () => {},
    // ...其余8个methods
  }
  return <ContextX.Provider value={contextValue}>{children}</ContextX.Provider>
}

// 重点改造内层Provider
function ContextXProviderTwo({ children }) {
  // 先获取外层Provider提供的Context值
  const outerContext = useContext(ContextX)
  // 内层自定义的3个state + 3个methods
  const innerContext = {
    state1: '我是内层的state1，会覆盖外层的state1',
    state2: '我是内层的state2',
    state3: '我是内层的state3',
    method1: () => { console.log('内层方法1，覆盖外层方法1') },
    method2: () => { console.log('内层方法2') },
    method3: () => { console.log('内层方法3') },
  }
  // 合并值：内层优先级高于外层
  const mergedContext = { ...outerContext, ...innerContext }
  return <ContextX.Provider value={mergedContext}>{children}</ContextX.Provider>
}

2. 性能优化版（避免不必要重渲染） #

如果Context值会频繁更新，建议用useMemo缓存合并后的值，同时用useCallback包裹内层的方法，减少不必要的重渲染：

import { createContext, useContext, useMemo, useCallback, useState } from 'react'

function ContextXProviderTwo({ children }) {
  const outerContext = useContext(ContextX)
  // 内层state示例
  const [innerState1, setInnerState1] = useState('inner state1')
  
  // 内层方法用useCallback包裹
  const innerMethod1 = useCallback(() => {
    setInnerState1('updated')
  }, [])

  const innerContext = useMemo(() => ({
    state1: innerState1,
    method1: innerMethod1,
    // 剩余2个state和2个methods
  }), [innerState1, innerMethod1])

  // 缓存合并后的值
  const mergedContext = useMemo(() => ({
    ...outerContext,
    ...innerContext
  }), [outerContext, innerContext])

  return <ContextX.Provider value={mergedContext}>{children}</ContextX.Provider>
}

使用方式 #

和你之前的嵌套写法完全一致，不需要改动组件树结构：

<ContextXProviderOne>
  <ContextXProviderTwo>
    <SomeComponent />
    {/* 所有子组件消费ContextX时，都会自动优先取内层值，没有则回退外层 */}
  </ContextXProviderTwo>
</ContextXProviderOne>

内容的提问来源于stack exchange，提问作者Mr.Engineer ET