Fre(发音/fri:/,likefree) 是一个小而美的前端框架，实现了Concurrent 和 Suspense
特性：
函数式组件与 hooksAPI并发与Suspensekeyedreconcilationalgorithm安装
yarnaddfre-S使用
import{render,h,useState}from'fre'functionCounter(){const[count,setCount]=useState(0)return(<div><h1>{count}</h1><buttononClick={()=>setCount(count+1)}>+</button></div>)}render(<Counter/>,document.getElementById('app'))hooksAPI
import{render,useState,h}from"fre"functionSex(){const[sex,setSex]=useState("boy")return(<divclass="sex"><buttononClick={()=>setSex(sex==="boy"?"girl":"boy")}>x</button><Countersex={sex}/></div>)}functionCounter(props){const[count,setCount]=useState(0)return(<divclass="counter"><h1>{props.sex}</h1><buttononClick={()=>setCount(count+1)}>+</button><h1>{count}</h1></div>)}render(<Sex/>,document.getElementById("app"))props
虽然hooksAPI使得state在function内部受控，但是props仍然是这个组件从外部接受的√
如下，sex就是从父组件传下来的
functionCounter(props){const[count,setCount]=useState(0)return(<divclass="counter"><h1>{props.sex}</h1><buttononClick={()=>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 的方式，对任务进行优先级调度，打断继续任务
评论