如何将React Context Provider放在消费者附近且保留共享状态

可行实现方案 #

方案1：使用React Navigation的分组路由包裹Provider #

你可以利用React Navigation提供的<Stack.Group>组件，将两个消费Context的页面归为同一组，把UserPostsProvider包裹在该分组的外层即可。这个方案可以完美满足你的所有需求：

• Provider仅作用于UserPostsGrid、UserPostsCardList两个页面，不会影响栈内其他页面，符合靠近消费者的性能优化原则
• 两个页面同属一个分组，切换时Provider不会被卸载，共享同一份Context状态
• 当用户离开整个分组（比如回到其他非分组页面）时，Provider才会被卸载，不会残留无用状态
  代码示例：

const MainStackNavigator = memo(() => {
    const Stack = createStackNavigator();
    return (
       <Stack.Navigator>
            // ... 大量其他页面
            
            {/* 仅给帖子相关页面套Provider */}
            <Stack.Group>
              <UserPostsProvider>
                <Stack.Screen
                    name="UserPostsGrid"
                    component={UserPostsGrid} 
                />
                <Stack.Screen
                    name="UserPostsCardList"
                    component={UserPostsCardList} 
                />
              </UserPostsProvider>
            </Stack.Group>
        </Stack.Navigator>
     );
}, ...);

方案2：嵌套独立栈路由 #

如果你的帖子相关页面后续还会扩展更多子页面，也可以单独抽离一个独立的帖子栈导航器，把Provider套在这个独立栈的外层即可，逻辑和分组方案一致，更方便后续扩展。

// 单独抽离帖子相关的导航栈
const UserPostsStack = () => {
  const Stack = createStackNavigator();
  return (
    <UserPostsProvider>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        <Stack.Screen
            name="UserPostsGrid"
            component={UserPostsGrid} 
        />
        <Stack.Screen
            name="UserPostsCardList"
            component={UserPostsCardList} 
        />
      </Stack.Navigator>
    </UserPostsProvider>
  )
}

// 主栈内直接引用这个独立栈
const MainStackNavigator = memo(() => {
    const Stack = createStackNavigator();
    return (
       <Stack.Navigator>
            // ... 大量其他页面
            <Stack.Screen
                name="UserPostsStack"
                component={UserPostsStack} 
            />
        </Stack.Navigator>
     );
}, ...);

注意：你之前设想的分别给两个页面套Provider的方案不可行，两个页面的Provider是完全独立的实例，无法共享状态，且页面回退时Provider会被卸载，状态会完全丢失，不要使用该方案。

内容的提问来源于stack exchange，提问作者Raul