Fre小而美的前端框架-技术圈

Fre (发音/fri:/, like free) 是一个小而美的前端框架，实现了 Concurrent 和 Suspense

特性：

函数式组件与 hooks API

并发与 Suspense

keyed reconcilation algorithm

安装



yarn add fre -S

使用



import { render, h, useState } from 'fre'



function Counter() {

  const [count, setCount] = useState(0)

  return (

    <div>

      <h1>{count}</h1>

      <button onClick={() => setCount(count + 1)}>+</button>

    </div>

  )

}



render(<Counter />, document.getElementById('app'))

hooks API



import { render, useState, h } from "fre"



function Sex() {

  const [sex, setSex] = useState("boy")

  return (

    <div class="sex">

      <button onClick={() => setSex(sex === "boy" ? "girl" : "boy")}>x</button>

      <Counter sex={sex} />

    </div>

  )

}



function Counter(props) {

  const [count, setCount] = useState(0)

  return (

    <div class="counter">

      <h1>{props.sex}</h1>

      <button onClick={() => setCount(count + 1)}>+</button>

      <h1>{count}</h1>

    </div>

  )

}



render(<Sex />, document.getElementById("app"))

props

虽然 hooks API 使得 state 在 function 内部受控，但是 props 仍然是这个组件从外部接受的√

如下，sex 就是从父组件传下来的



function Counter(props) {

  const [count, setCount] = useState(0)

  return (

    <div class="counter">

      <h1>{props.sex}</h1>

      <button onClick={() => setCount(count + 1)}>+</button>

      <h1>{count}</h1>

    </div>

  )

}

JSX

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



import { h } from 'fre'

webpack 需配置：



{

  "plugins": [

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

  ]

}

keyed-diff-patch

基于 fiber 链表的 diff 方案，使用 hash 标记位置，更方便的比对

Concurrent

异步渲染，通过时间切片，suspense 的方式，对任务进行优先级调度，打断继续任务