fre.js 介绍
介绍：
其实，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,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
import { h } from 'fre'
webpack 需配置：
{
"plugins": [
["transform-react-jsx",{ "pragma":"Fre.h" }]
]
}
GitHub:https://github.com/132yse/fre
网站描述:一个小而美的前端 MVVM 框架
fre.js
官方网站：https://fre.js.org
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。