先容:
实在,free 是一部动漫名,也是我最喜欢的番没有之一,haru 是我儿子!
安装:
yarn add fre -S
使用:
import{ observe, html, mount } from './src' function counter() { const data = observe({ count: 0 }) return html` <div> <h1>${data.count}</h1> <button onclick=${() => {data.count++}}>+</button> <button onclick=${() => {data.count--}}>-</button> </div> ` } mount(html`<${counter} />`, document.body)
Proxy:
const data = observe({ count: 0 })
会天生一个全递归的 Proxy 工具,会自动去observe,data 更新会自动触发 rerender,这个更新是准确
fre 提供 JSX-like 的 tagged template 语法,浏览器原生支持,无需编译
建议凭据场景选择,webpack 下 JSX 对照合适,浏览器环境肯定要 tagged template(如后端语言的模板引擎)
html` <div> <h1>${data.count}</h1> <button onclick=${() => {data.count++}}>+</button> <button onclick=${() => {data.count--}}>-</button> </div> `
和 jsx 一样,最终会被转换成 h 函数,进而天生 vdom tree
性能不会差,可以大略理解为 vue 的 compile 历程,若是使用 jsx ,将直接省略这个历程
hooks API
实在这里应该叫做functionalCompoent对照合适,一种新的组件化方案。如下,fre 和 vue、react 差别,fre 的组件是无自身状态、可复用的符号代码块
只有根组件拥有全局状态,但这不故障你举行多次 render 缔造多个根组件
import{ mount, html, observe } from 'fre' function counter() { const data = observe({ count: 0 }) return html` <div> ${html`<${count} count=${data.count} />`} <button onclick=${() => {data.count++}}>+</button> <button onclick=${() => {data.count--}}>-</button> </div> ` } function count(props){ return html` <h1>${props.count}</h1> ` } mount(html`<${counter} />`, document.body)
JSX
默认也对外暴露了 h 函数,可以选用 JSX
import { h } from 'fre'
webpack 需设置:
{ "plugins": [ ["transform-react-jsx", { "pragma":"Fre.h" }] ] }
1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入
2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各种产物的最新流动,优惠券领取点击进入
3.广告同盟: 整理了现在主流的广告同盟平台,若是你有流量,可以作为参考选择适合你的平台点击进入
链接: http://www.fly63.com/nav/1177