fre- 小而美的前端框架（freebuds3）

网友投稿 715 2022-10-10

fre- 小而美的前端框架（freebuds3）

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

其实，free 是一部动漫名，也是我最喜欢的番没有之一，haru 是我儿子！参见 c站

特性：

函数式组件与 hooks API并发与 Suspensekeyed reconcilation algorithm

安装

yarn add fre -S

使用

import { render, h, useState } from 'fre'function Counter() { const [count, setCount] = useState(0) return (

{count}

)}render(, document.getElementById('app'))

hooks API

import { render, useState, h } from "fre"function Sex() { const [sex, setSex] = useState("boy") return (

)}function Counter(props) { const [count, setCount] = useState(0) return (

{props.sex}

)}render(, document.getElementById("app"))

props

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

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

function Counter(props) { const [count, setCount] = useState(0) return (

)}

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

import { h } from 'fre'

webpack 需配置：

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

keyed-diff-patch

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

Concurrent

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

标签：js

715 2022-10-10