如何避免 React/JSX 末日金字塔？

Question

我喜欢在我的 React 和 React Native 项目中使用上下文，这意味着每个项目有多个上下文提供者。结果，我的应用程序的根目录通常如下所示：

<ContextA.Provider value={valueA}>
    <ContextB.Provider value={valueB}>
        <ContextC.Provider value={valueC}>
            // ...and so on until rendering actual app content
        </ContextC.Provider>
    </ContextB.Provider>
</ContextA.Provider>

这会创建一个看起来和感觉都像是不良风格/做法的提供商金字塔。

我可以将我的上下文值集中到一个大提供者中：

<BigContext.Provider value={ valueA, valueB, valueC }>
   /// app content
</BigContext.Provider>

...但是有一些充分的理由希望保持上下文分离 - 主要是防止仅对 valueA 感兴趣的组件在仅 valueB 更改时重新渲染。

即使没有上下文，您仍然可以让来自不同软件包的提供程序堆叠到它们自己的金字塔中。这是我的一个 React Native 应用程序的根目录，例如：

<DataContext.Provider value={data}>
    <AppearanceProvider>
        <SafeAreaProvider>
            <NavigationContainer>
                <Tab.Navigator>
                    // tab screens here
                </Tab.Navigator>
            </NavigationContainer>
        </SafeAreaProvider>
    </AppearanceProvider>
</DataContext.Provider>

有没有一种干净的方法来“崩溃”或以某种方式避免这些末日金字塔？

Answer 1

“清理”所谓的末日金字塔并没有任何性能优势。拥有多个级别完全很好。

在您实现下面的代码之前，请确保您不要仅仅因为可以就提供全局级别的上下文。上下文提供程序必须包装在使用它的组件附近，这意味着并不总是在根级别。

也就是说，这是一个简单的高阶组件，它可以包装多个 Provider 以提供 Redux compose esque API。

/**
 * Check if the object has a property matching the key
 * NOTE: Works only for shallow objects.
 * @param object
 * @param key
 * @returns {boolean|boolean}
 */
const hasProperty = (object, key) =>
  object ? Object.hasOwnProperty.call(object, key) : false;
const hasProps = (arg) =>
  hasProperty(arg, 'provider') && hasProperty(arg, 'props');

export const withContextProviders = (...providers) => (Component) => (props) =>
  providers.reduceRight((acc, prov) => {
    let Provider = prov;
    if (hasProps(prov)) {
      Provider = prov.context;
      const providerProps = prov.props;
      return <Provider {...providerProps}>{acc}</Provider>;
    }
    return <Provider>{acc}</Provider>;
  }, <Component {...props} />);

用法：

const Component = () => {...}
export withContextProviders(ThemeProvider, I8nProvider)(Component)
// OR
export withContextProviders({provider: ThemeProvider, props: {darkMode: true}}, I8nProvider)(Component)
// OR
export withContextProviders(ThemeProvider, {provider: I8nProvider, props: {lang: 'en'}})(Component)
// OR
const providers = [{provider: ThemeProvider, props: {darkMode: true}}, {provider: I8nProvider, props: {lang: 'en'}}]
export withContextProviders(...providers)(Component)

注意：这不会产生单例，即如果两个组件都用这个 HoC 包装，它们都将获得自己的上下文实例。对于这种情况，建议在根级别使用 provider 包装组件

同样，拥有多个级别是完全很好。