#reactjs
Read more stories on Hashnode
Articles with this tag
1.背景 每次代码转译后iframe元素都需要重新渲染,这部分可以优化。此外,我们对于转译报错的情况,没有做容错处理,需要优化。 2.需求分析 我们可以给宿主(当前应用)和iframe通过postMessage去实现通信。每一次代码转译后,将代码通过消息发送给iframe,iframe有消息的接收事件...
1.背景: 上一节我们实现了代码的转译,转译后的代码需要执行和预览。我们可以用iframe去载入对应的代码,从而实现预览效果。 2.交互分析 编辑代码→点击转译→拼接转译后的代码→iframe加载代码并执行 iframe的src,可以通过将完整的html字符串,转为Blob对象,再转为链接去获取。 3...
1.背景 jsx/tsx代码,无法直接在浏览器端运行。所以需要将代码进行转译。 可以通过babel去实现。 以babel playground为例(https://www.babeljs.cn/repl#): // 转译前 const App = () => { return ( ...
业务组件库或者一些库的文档,经常有playground。比如Code Sanbox,React...
1....
在上一篇文章,我们使用antd5作为示例,简单实现一个useLayer hook用于管理弹层状态。 但实际项目开发,我们未必会使用antd,可能是其他的UI库,这个时候需要考虑如何适配UI库。 1. 分析 实现前,我们先分析并回顾一下,整体的流程: 传入Schemas ->...