taro 全局 渲染 组件 到 小程序 DOM中

[MiniOcean404]

这个特性解决了什么问题？

小程序业务需要自定义 toast ，但是现在所有的 toast 都在 代码的 render 函数中一个个手动添加，使用 @taro/react 及 react-dom 中的render 都不能渲染 会直接报错

这个 API 长什么样？

小程序业务需要自定义 toast ，但是现在所有的 toast 都在 代码的 render 函数中一个个手动添加，使用 @taro/react 及 react-dom 中的render 都不能渲染 会直接报错

[Barrierml]

说明

hello呀，因为小程序本身多页面的设计，每一个Page都被封装成了一个单独DOM树，页面与页面的DOM完全相互隔离，假设我在A页面渲染了一个toast，切换到B页面就看不到它了。。这个限制不是taro可以突破的，而且即使有了全局渲染api，我们应该渲染到哪个页面呢？所以，不是taro不想给，是taro给不了呀😭

至于为什么react-dom无法在小程序内使用，因为react-dom是专门提供给浏览器的DOM使用的，taro内部自己实现的有一套“mini-react-dom”。

代替解决方案

虽然全局渲染组件的API无法实现，但是我们完全可以利用HOC自己实现一个在当前页面渲染组件的API
关于HOC的官方介绍

例子使用React实现，Vue也是类似的方法

我实现了一个简单的demo

具体HOC写法在这里

点我查看

使用实例在这里

点我查看

随笔

这样的设计其实很简陋，因为每次渲染都会重新diff整个页面的DOM，如果打算生产使用的话，建议针对每个page组件实现一个shouldComponentUpdate ，提高性能。
而且一个页面只支持一个组件渲染等等问题呀，不过设计原理上大概就是这样了，后续怎么扩展就看你自己的需求啦。

还有或许可以做一个专门的taro-react-hoc的库？

[MiniOcean404]

辛苦了，辛苦了，周六还在加班回复，谢谢，我懂了，你们继续加油