Fre小而美的前端框架

联合创作 · 2023-09-19 11:16

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 的方式,对任务进行优先级调度,打断继续任务

浏览 13
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报