Fre 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Fre 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Fre 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Fre 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Fre 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 伊撒尔
适用人群 未知
收录时间 2019-11-15

软件简介

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

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (2)

加载中
有没有官网啊
2019/12/02 12:33
回复
举报
伊撒尔软件作者
只有 readme
2019/12/05 21:54
回复
举报
更多评论
暂无内容
发表于大前端专区
2019/12/07 20:26

fre 发布 v1.11

唔,大家好,我是 132,昨天开源中国评选出榜啦,fre 排名第八(vue 第一,antd 第五,taro 第六) 所以我又更新了一波 fre,也就是今天发的版本,主要更新如下: 内置 shouldComponentUpdate 这曾经是 vue 的专属,过去我一直以为这是 vue1.x 的专属,因为按照我对 vdom 的认知,是无法精确更新的 然后看完 vue3 代码后,才知道,特么原来只是内置了 SCU! 这就太简单了……所以我也给 fre 内置了::>_<:: react 的话,相当于所...

0
0
发表于大前端专区
2020/03/05 14:29

fre 代码优化

原文链接: fre 代码优化 上一篇: benchmarkjs 测试函数性能 下一篇: MessageChannel 实现worker之间的通信 https://github.com/yisar/fre 一个比较小的框架, 想看看实现原理, 结果看到这样的代码..... const hashfy = c => { const out = {} c.pop ? c.forEach((v, i) => v.pop ? v.forEach((vi, j) => (out[hs(i, j, vi.key)] = vi)) : (out[hs(i, null, v.key)] = v) ) ...

0
0
发表于大前端专区
2018/09/05 19:44

关于电磁波近远场变换

%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=2048; index_beam=1024 global fft_y; global x_points; global x_delta; global y_points; global y_delta; global fre; global coordtype; global crosstick; global pol; global coord1_cent; global coord2_cent; global coord1_point...

1
0
发表了博客
2018/12/17 10:45

WDEM接口小程序

fid1 = fopen('xy.dat','rt'); fid2 = fopen('elevent0.dat','rt'); fgetl(fid1); b = fscanf(fid1,'%f %f %f %f %f %f %f %f %f %f %f %f %f %f',[14,inf]); Ele = fscanf(fid2,'%f %f',[2,inf]); fclose(fid1);fclose(fid2); b = b'; Ele = Ele'; %% 文件头 根据实际情况改动 Num_Edge = 16; %扩边点数 Coe_Edge = 1.3; %扩边系数 Terrain = 1; %0:无地表地形数据,1:有地表地形数据 Err = 0 ;%0:无误差数据,1:有误差数据...

0
0
发表于服务端专区
2020/09/13 20:58

面试题精选:数据伪造

这道题应该算是我原创的的一道题,来源于我遇到的一个具体需求。大致需求是已知一批数和每个数出现的次数,然后写个接口,每次调用都能返回已知数据中的某个数,且返回的概率和原始数据中每个数出现的概率一致,题目描述起来有些绕口,我们来举个实际的例子。 ![在这里插入图片描述](https://oscimg.oschina.net/oscnet/up-b496c9c158f6026d2bbeaed98d16b30b886.png) 以上面的输入为例,要求实现的接口必须以11.96%的概率返回5...

0
0
发表了博客
2018/04/22 03:01

python 字典dict和列表list的读取速度问题, range合并

python 字典和列表的读取速度问题 最近在进行基因组数据处理的时候,需要读取较大数据(2.7G)存入字典中,然后对被处理数据进行字典key值的匹配,在被处理文件中每次读取一行进行处理后查找是否在字典的keys中,以下两段代码的效率差别非常大: 第一段: if(pos in fre_dist.keys()): newvalue= fre_dist[pos] 第二段: if(pos in fre_dist): newValue=fre_dist[pos] 在处理3万条数据时,第二段代码的速度是第一段代码速度的上...

0
0
发表了博客
2016/11/04 13:27

频谱分析-FFT之后的那些事情

知乎上有几个比较好的讲解傅里叶变换的文章: [傅里叶分析之掐死教程(完整版)](https://zhuanlan.zhihu.com/p/19763358) 通过这些文章都能对频谱有大致了解,但等你自己坐下了,要对一个信号进行频谱分析时,你会发现好多细微的问题其实并没有注意,下面,将讲讲那些细微的问题 #实现快速傅里叶变换 忠告:除非你自己为了验证你的能力,或为了验证你对对快速傅里叶变换算法的了解,千万别用自己写的快速傅里叶变换算法,也别在...

0
1
发表了博客
2016/06/20 13:39

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 version 6.6.7.5 [19.9MB] http://msdl.microsoft.com/download/symbols/debuggers/dbg_ia64_6.6.07.5.exe WinDbg for Windows, 64bit x86 version 6.6.7.5 [12.6MB] http://msdl.microsoft.com/download/symbols/debuggers/dbg_amd64_6...

0
0
2016/06/20 13:40

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 version 6.6.7.5 [19.9MB] http://msdl.microsoft.com/download/symbols/debuggers/dbg_ia64_6.6.07.5.exe WinDbg for Windows, 64bit x86 version 6.6.7.5 [12.6MB] http://msdl.microsoft.com/download/symbols/debuggers/dbg_amd64_6...

0
0
发表了博客
2016/06/20 13:41

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 version 6.6.7.5 [19.9MB] http://msdl.microsoft.com/download/symbols/debuggers/dbg_ia64_6.6.07.5.exe WinDbg for Windows, 64bit x86 version 6.6.7.5 [12.6MB] http://msdl.microsoft.com/download/symbols/debuggers/dbg_amd64_6...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
2 评论
17 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部