当前位置：首页 > 软件库 > Web应用开发 > JavaScript MVC 框架 >

Fre

小而美的前端框架

授权协议 MIT

开发语言 JavaScript

所属分类 Web应用开发、 JavaScript MVC 框架

软件类型开源软件

地区国产

投递者刘棋

操作系统跨平台

开源组织无

适用人群未知

软件官网

软件文档

官方下载

软件概览

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

使用案例

[开源]Fre 发布 0.5 版本，更新 diff-patch 和 proxy 方案

halo 大家好，我是 132，然后就是…… 经过最近几天的探讨，fre 终于发了一个……能跑起来的版本了这次的更新主要是针对 diff 和 proxy 我一直追求一种【刚刚好】的状态，就是代码量缩减到最简，然后性能在崩坏的边缘不断试探 fre 就是一个这样的框架，你可以看到它只有300+行代码，却麻雀虽小，五脏俱全。 install yarn add fre -S 复制代码 use impor
Fre：又一个小而美的前端MVVM框架

halo，大家好，好久不贱呢！最近因为看了一些 be 的小说，整个人都比较致郁::>_<:: 就在昨天，我用了一天的时间写了 fre，又一个小而美的前端MVMM框架可能你觉得，有了 vue 和 react，没必要再写一个了::>_<::我觉得我还是想想办法寻找一下它的存在感吧先看 API： import { useState, html, render } from 'fre' funct
fre

int a
fre 更新了，框架设计重思考……

halo 大家好，好久不贱呢~ 好久没出来浪了::>_<::，主要是之前在重构 c站，现在重构完了是时候重构一下俺的轮子了…… 所以，如你所见，smox、fre、eplayer 都更新了这篇文章，主要来说说，fre 框架的设计 Use import { h, render, useState } from 'fre' function Counter() { const [count,

Fre

同类工具

相关阅读

相关文章

相关问答

相关文档