Fre 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Fre 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: JavaScript 查看源码 »
操作系统: 跨平台
收录时间: 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 指数为
超过 的项目

Fre 的相关资讯

还没有任何资讯

Fre 的相关博客

fre 发布 v1.11

唔,大家好,我是 132,昨天开源中国评选出榜啦,fre 排名第八(vue 第一,antd 第五,taro 第六) 所以我又更新了一波 fre,...

fre 代码优化

https://github.com/yisar/fre 一个比较小的框架, 想看看实现原理, 结果看到这样的代码..... const hashfy = c => { const o...

关于电磁波近远场变换

%function Near2far(pathstr1,pathstr2,n_beam,index_beam) function Near2far(pathstr1,~,n_beam,index_beam) pathstr1='G:\...

WDEM接口小程序

fid1 = fopen('xy.dat','rt'); fid2 = fopen('elevent0.dat','rt'); fgetl(fid1); b = fscanf(fid1,'%f %f %f %f %f %f %f %f...

面试题精选:数据伪造

这道题应该算是我原创的的一道题,来源于我遇到的一个具体需求。大致需求是已知一批数和每个数出现的次数,然后写个接口,每次...

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

python 字典和列表的读取速度问题 最近在进行基因组数据处理的时候,需要读取较大数据(2.7G)存入字典中,然后对被处理数据进...

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

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

Windows调试器及不同平台符号包下载地址(收集)

WinDbg for Windows WinDbg for Windows, 32bit version 6.6.7.5 [15.2MB] http://msdl.microsoft.com/download/symbols/debu...

Windows调试器及不同平台符号包下载地址(收集)

WinDbg for Windows WinDbg for Windows, 32bit version 6.6.7.5 [15.2MB] http://msdl.microsoft.com/download/symbols/debu...

Windows调试器及不同平台符号包下载地址(收集)

WinDbg for Windows WinDbg for Windows, 32bit version 6.6.7.5 [15.2MB] http://msdl.microsoft.com/download/symbols/debu...

Fre 的相关问答

还没有任何问答,马上提问

评论 (2)

加载中
有没有官网啊
2019/12/02 12:33
回复
举报
伊撒尔软件作者
只有 readme
2019/12/05 21:54
回复
举报
更多评论
2 评论
7 收藏
分享
返回顶部
顶部