Context(移植自 SolidJS)
Context Demo
此示例按 SolidJS 文档中的 Context Demo 移植到 Rue,展示如何用 createContext、Provider 和 useContext 避免 prop drilling。
当前共享计数
1
这个数字由多个后代组件共同消费,但没有经过逐层 props 透传。
深层消费
右侧这棵子树里没有任何组件接收 count 或操作函数作为 props。
中间层组件不接收任何 count props
Deep Child
这里隔了多层包装组件,仍然能直接读取 Context。
深层读取结果:1
缺少 Provider 时回退默认值
这一段同样移植自 SolidJS Context 的常见用法:当组件没有被对应的 Provider 包裹时, useContext() 会回退到 createContext() 里声明的默认值。
没有 Provider
读取到的主题标签
默认主题(来自 createContext 默认值)当前组件没有被任何 ThemeContext.Provider 包裹。
有 Provider
读取到的主题标签
暖阳主题(来自 Provider)这里被 ThemeProvider 显式包裹。