先容：

实在，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 提供 *** X-like 的 tagged template 语法，浏览器原生支持，无需编译

建议凭据场景选择，webpack 下 *** X 对照合适，浏览器环境肯定要 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)

*** X

默认也对外暴露了 h 函数，可以选用 *** X

import { h } from 'fre'

webpack 需设置：

{
  "plugins": [
    ["transform-react-jsx", { "pragma":"Fre.h" }]
  ]
}