小而美的前端框架 fre

小而美的前端框架 fre

MIT
JavaScript
跨平台
2019-11-15
伊撒尔
fre 正在参加 2019 年度最受欢迎开源中国软件评选,请投票支持!
fre 在 2019 年度最受欢迎开源中国软件评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票赢奖品
已投票

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

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

特性:

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

的码云指数为
超过 的项目
加载中

评论(2)

喵少爷
喵少爷
有没有官网啊
伊撒尔
伊撒尔 软件作者
只有 readme

暂无资讯

暂无问答

fre 发布 v1.11

唔,大家好,我是 132,昨天开源中国评选出榜啦,fre 排名第八(vue 第一,antd 第五,taro 第六) 所以我又更新了一波 fre,也就是今天发的版本,主要更新如下: 内置 shouldComponentUpdat...

昨天 20:26
2
0
关于电磁波近远场变换

%function Near2far(pathstr1,pathstr2,n_beam,index_beam) function Near2far(pathstr1,~,n_beam,index_beam) pathstr1='G:\ISO\Horn\Horn-v-8.2-12.4-df0.1-Tx.nf_V-Pol..nf.txt' n_beam=2...

2018/09/05 19:44
57
0
Windows调试器及不同平台符号包下载地址(收集)

WinDbg for Windows WinDbg for Windows, 32bit version 6.6.7.5 [15.2MB] http://msdl.microsoft.com/download/symbols/debuggers/dbg_x86_6.6.07.5.exe WinDbg for Windows, 64bit Itanium...

2016/06/20 13:39
3
0
Windows调试器及不同平台符号包下载地址(收集)

WinDbg for Windows WinDbg for Windows, 32bit version 6.6.7.5 [15.2MB] http://msdl.microsoft.com/download/symbols/debuggers/dbg_x86_6.6.07.5.exe WinDbg for Windows, 64bit Itanium...

2016/06/20 13:40
34
0
频谱分析-FFT之后的那些事情

一个信号进行频谱分析时,你会发现好多细微的问题其实并没有注意,下面,将讲讲那些细微的问题

2016/11/04 13:27
2.8K
0
Windows调试器及不同平台符号包下载地址(收集)

WinDbg for Windows WinDbg for Windows, 32bit version 6.6.7.5 [15.2MB] http://msdl.microsoft.com/download/symbols/debuggers/dbg_x86_6.6.07.5.exe WinDbg for Windows, 64bit Itanium...

2016/06/20 13:41
164
0
Windows调试器及不同平台符号包下载地址(收集)

WinDbg for Windows WinDbg for Windows, 32bit version 6.6.7.5 [15.2MB] http://msdl.microsoft.com/download/symbols/debuggers/dbg_x86_6.6.07.5.exe WinDbg for Windows, 64bit Itanium...

2016/06/20 13:39
1
0
米联客 ZYNQ/SOC 精品教程 S02-CH17 自定义IP AXI_PWM实验

软件版本:VIVADO2017.4 操作系统:WIN10 64bit 硬件平台:适用米联客 ZYNQ系列开发板 米联客(MSXBO)论坛:www.osrc.cn答疑解惑专栏开通,欢迎大家给我提问!! 17.1 概述 本课就以AXI-Lite总...

08/30 17:10
27
0
百度云 ai接口 图片文字识别

文档中心 http://ai.baidu.com/docs#/ 文字识别api文档 http://ai.baidu.com/docs#/OCR-API/e1bd77f3 通用文字识别对于背景比较简单,最好是纯色的效果最好 登陆后进入文字识别 创建项目,可...

2018/05/18 16:53
403
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部