首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Preact 开发基于Shadow DOM的JS插件

前言 第三方JS插件在日常开发中经常会使用到。对于一些不涉及到展示的功能插件,仅需要引入一个js文件即可,但对于一些界面级插件,如轮播图、富文本编辑器等,往往还需要单独引入css文件使之展示正常。...如果可以仅引入一个js文件,并且插件样式能完全做到与主体应用隔离,那么插件的通用性也能进一步提高。...MVVM框架当然也可以用来开发界面级JS插件,甚至会使事情变得更加简单。 JS插件一般都是轻量的。相比于使用React,Preact更符合我们的要。...部分分离,借助JSX,可以做到all in JS,这也是我们选择Preact的重要原因之一。...使用Preact示例如下: import { h, render } from 'preact' const shadowHost = document.createElement("div"); document.body.appendChild

2K30

Preact

Preact 是 React 的缩略版, 体积非常小, 但五脏俱全. 如果你想了解 React 的基本原理, 可以去学习学习 Preact 的源码, 这也正是本文的目的。...为了简化程序 Preact 的实现将 diff 和 DOM 杂糅在一起, 但逻辑还是很清晰,看下目录结构就知道了: src/diff ├── children.js # 比对children数组 ├──...index.js # 比对两个节点 └── props.js # 比对两个DOM节点的props image.png 在深入 diff 程序之前,先看一下基本的对象结构, 方便后面理解程序流程...preact 也实现了 hooks 机制,实现代码也就百来行,让我们来体会体会. hooks 功能本身是没有集成在 Preact 代码库内部的,而是通过preact/hooks导入 import { h...实际上 Preact 提供了options对象来对 Preact diff 进行扩展,options 类似于 Preact 生命周期钩子,在 diff 过程中被调用(为了行文简洁,上面的代码我忽略掉了)

1.4K30
您找到你想要的搜索结果了吗?
是的
没有找到

Preact: 可作React的备胎

目前看来,Preact是最好的备胎。 Preact肯定是读过《一个备胎的自我休养》,充分考虑到了开发者迁移的痛苦,所以,最理想情况,迁移到Preact只要修改四行,就搞定了。...先是在package.json中增加preactpreact-compat,其中preact-compat用来保证preact和React之间的接口兼容。...preact,希望那时候我们别手忙脚乱就好。...基于这个原则,我们不会在现有代码中去用特定于preact的功能,我们只要关心那些功能React有但是preact没有,这是需要避免的危险区。...有备胎的感觉真好:-) ---- 往期精选文章 ES6中一些超级好用的内置方法 浅谈web自适应 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划 全栈工程师技能大全

83310

Preact 源码解析系列一 :简单DOM渲染

用过Preact的人都知道,在每个JS文件之前,都需要写 /** @jsx h */,那这句话是什么作用呢? 先从JSX说起。...; h() 接下来看看 h 做了一件什么事,它其实相当于react.createElement(),用于创建虚拟DOM,而所谓的虚拟DOM实际上就是一个JS对象,它长这样 { nodeName...args) : null; return new Vnode( nodeName, attributes, children ); } 接着在render()函数里将其渲染成一个真实的DOM Preact...}) } container.appendChild(node) } } 接着,调用render这个方法就可以渲染出想要的结果 Preact.render...总结一下: 其实Preact的渲染的还是很简单的,整个过程就是 1、Babel解析JSX 2、h函数将解析后JSX节点转成虚拟DOM 3、render函数把它转成真实的节点 当然这个例子还很简单,对于render

67620

Preact 源码解析系列一 :简单DOM渲染

用过Preact的人都知道,在每个JS文件之前,都需要写 /** @jsx h */,那这句话是什么作用呢? 先从JSX说起。...; h() 接下来看看 h 做了一件什么事,它其实相当于react.createElement(),用于创建虚拟DOM,而所谓的虚拟DOM实际上就是一个JS对象,它长这样 { nodeName...args) : null; return new Vnode( nodeName, attributes, children ); } 接着在render()函数里将其渲染成一个真实的DOM Preact...}) } container.appendChild(node) } } 接着,调用render这个方法就可以渲染出想要的结果 Preact.render...总结一下: 其实Preact的渲染的还是很简单的,整个过程就是 1、Babel解析JSX 2、h函数将解析后JSX节点转成虚拟DOM 3、render函数把它转成真实的节点 当然这个例子还很简单,对于render

1.1K60

Preact -- React的轻量解决方案

但同时,大家由于之前度过React的上手痛苦期后,开始体会到React的许多好处,裸写运营活动的时候,又开始对React的好处念念不忘记:良好的组件化、解放js能力的jsx等。...渲染性能方面,参考了一篇JS WEB FRAMEWORKS BENCHMARK系列测评文章,发现Preact在创建、更新、删除节点等方面,都有良好的表现。 第一次性能测试: ?...而我在steamer-react的react-preact分支里的处理是直接用文件名后缀。如果是有React相关引入的,则用.js后缀,而有Preact相关引入的,则用.jsx后缀。...babel-preset-react 也是依赖于 babel-plugin-transform-react-jsx,而 babel-plugin-transform-react-jsx 在将 jsx 编译成 js...看起来跟我们写原生js的事件绑定没有什么区别。

2K50

Rocket Chat,一个纯前端技术构建的开源产品

1.Node.js Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时框架。Node.js是使用前端语言编写后端服务的一个非常有名的框架。...你可以使用JavaScript或TypeScrpt来编写Node.js的代码。...早些年,Node.js影响力非常大,主要是它的事件循环机制相对过往Java同步阻塞,非常高效,很多公司或程序员对这个都非常赞赏。不过近些年,Node.js在国内流行度在下降。...链接在文末. 4.Preact 如果说起React,可能大家会非常熟悉。但Preact可能知名度就没有这么高了。Preact是什么呢? Preact是一款轻量级的取代React的前端类库。...(兼容是指它的写法与React几乎一样) 由于它的小和快,这使得一些习惯React,又觉得它太重了的,纷纷转向Preact

3.9K40

【框架】984- 2021 年最佳 JavaScript 框架

React.js 在我们编制的 2021 年最佳 JavaScript 框架的榜单中,前端类排名第一是 React.js。...Preact.js 在我们的 2021 年最佳 JavaScript 框架榜单中,Preact.js 在前端类排名第五。它是 React 的轻量级、快速且功能强大的替代方案(它并非一个完整的框架)。...谷歌高级开发项目工程师 Jason Miller 创建了 Preact,并被一些开发者用作 React 的子集,同时还删除了部分特性。...Preact.js 的基本原则与 React 相同,是一种使用虚拟 DOM 的基于组件的方法,同时与 React 完全兼容。 你还可以使用 React 包,而不会影响速度、性能和精简。...如果你不需要 React 的全部潜力,大多数开发者将在开发过程中使用 Preact,甚至在生产中切换到 Preact。使用 Preact 的大公司有很多,包括腾讯、Uber 和 Lyft。

73730

记一次preact迁移到react16.6.7的经历

前言 preact作为备胎,但是具有体积小,diff算法优化过的特点,简单活动页用上它是不错的选择。...但是考虑到react令人兴奋的新特性,preact并没有按时更新去完全支持它,更严重的是一些babel插件、一些库配合preact会有问题。所以,还是不得不迁移了。 如何迁移?...从alias改起 首先,一般是这样子接入preact的,使得我们代码里面毫无感觉我们用的是preact。...在webpack的alias里面配置: alias: { react: 'preact-compat', 'react-dom': 'preact-compat' }, 复制代码...必须保证后面用到this.state之前,对state有初始化,否则是null 3. preact相关的router迁移回react生态 首先,import的preact-router得换成react-router

1.1K40

为什么不用Preact或者Fast-React来代替React ?

Preact产出的preact-render-to-string还有我现在的团队在用的fast-react-render,都是这个思路。 然而我一直都不喜欢这些替代库,特别是在同构的场景下。...而同时Preact等并没有Stream方案。 再次,从优化的角度来看,框架都是在演化的。今天我们可以为了性能换上Preact,明天也许就要为了性能去换上Xreact。...Preact的render方法因为默认是append行为,所以增加了一个preact-replace来和React行为做对比。...而且得益于checksum的加持,如果checksum是一致的(react栏),React的渲染时间在DOM节点较少的时候与Preact一致,在节点很多的情况下比Preact、其他方案的成绩要好一大截。...然而React毕竟有40多K,比起Preact还是要大不少。在开发m.uber里,提到了多次2G网络,我觉得也是影响Uber工程师选择Preact的关键因素。

35830

zui

特性 丰富的 CSS 工具类:基于 Tailwind CSS 提供了丰富的 CSS 工具类,包括特别的语义化外观类名; 强大的 JS 组件:基于 Preact 提供了大量 JavaScript 组件...组件支持原生调用,丰富的引入方式,支持通过 ESM 导入,或者直接在浏览器中引用整个 JS 和 CSS,支持打包定制自己的组合版本; ⚙️ 高度定制:除了按需引入,还支持打包定制自己的组合版本,避免多余...[ ] 交互式的文档示例; [ ] 在线演练场; [ ] 主题设计器; [ ] 设计规范指导文档; [ ] 可配置的定制打包机制,支持在线生成打包配置; [ ] 适用于 React 和 Preact...18+ 包管理器:pnpm 构建工具:Vite CSS 工具库:TailwindCSS 静态文档网站生成:VitePress TypeScript 4.5+ 字体图标生成:Fantasticon JS...组件开发 preact.js

8210
领券