介绍：

其实，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" }]
  ]
}

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/1177