在《一些关于多租户小程序的想法(React Context 的妙用) - Jeff Tian的文章 - 知乎 》中,我提到自己使用 React Context 将小程序做了隔离,从而拥有了一种多租户的效果。这是我第一次使用 React Context,顿时感觉太香了!
于是后面一碰到点儿什么问题,就想着用 React Context 来解决,随着 React Context 的增加,就碰到了 React Context 地狱的问题。就像之前没有 Promise 时,通过层层 callback 来写异步调用一样,就像一些没有经验的程序员通过层层 if/else 来写复杂的逻辑一样,React Context 一旦多了,也会出现深渊一样的嵌套 Context:
如上所示,有 3 个 Context 了,其实还不够扎眼。但是我最近又需要添加另一个 Context,感觉不能再这样嵌套下去了,于是写了一个 MultiProvider 组件,以允许通过传入多个 Context Provider,又不增加缩进。就像用 Promise 之后,异步调用个数并没有减少,只是代码的缩进级别减少了而已。
效果
效果非常好,嵌套的多个 Context Provider 只需要以数组形式传入给 MultiProvider 组件就行了:
代码
MultiProvider 的源代码如下:
typescript import React from react
const nest = ( children: React.ReactNode, component: React.ReactElement ) => React.cloneElement(component, {}, children)
export type MultiProviderProps = React.PropsWithChildren<{ providers: React.ReactElement[] }>
const MultiProvider: React.FC
export default MultiProvider
原理
其实就是将手动嵌套的过程,改成了读取一个平铺的数组,再用代码进行自动嵌套而已。虽然运行时仍然嵌套了,但是在代码视图中,就是一个平铺的数组。