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