Fre
Feature
🎉 Functional Component and hooks API🎊 Concurrent and Suspense🔭 keyed reconcilation algorithm
Contributors
Fre has wonderful code, we need more to join us and improve together.
Real world
Any other demos click here
Use
yarn add fre
import { h, render, useState } from 'fre'
function App() {
const [count, setCount] = useState(0)
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
)
}
render(<App />, document.getElementById('root'))
Hooks API
useState
useState
is a base API, It will receive initial state and return a Array
You can use it many times, new state is available when component is rerender
function App() {
const [up, setUp] = useState(0)
const [down, setDown] = useState(0)
return (
<div>
<h1>{up}</h1>
<button onClick={() => setUp(up + 1)}>+</button>
<h1>{down}</h1>
<button onClick={() => setDown(down - 1)}>-</button>
</div>
)
}
useReducer
useReducer
and useState
are almost the same,but useReducer
needs a global reducer
function reducer(state, action) {
switch (action.type) {
case 'up':
return { count: state.count + 1 }
case 'down':
return { count: state.count - 1 }
}
}
function App() {
const [state, dispatch] = useReducer(reducer, { count: 1 })
return (
<div>
{state.count}
<button onClick={() => dispatch({ type: 'up' })}>+</button>
<button onClick={() => dispatch({ type: 'down' })}>+</button>
</div>
)
}
useEffect
It is the execution and cleanup of effects, which is represented by the second parameter
useEffect(f) // effect (and clean-up) every time
useEffect(f, []) // effect (and clean-up) only once in a component's life
useEffect(f, [x]) // effect (and clean-up) when property x changes in a component's life
function App({ flag }) {
const [count, setCount] = useState(0)
useEffect(() => {
document.title = 'count is ' + count
}, [flag])
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
)
}
If it return a function, the function can do cleanups:
useEffect(() => {
document.title = 'count is ' + count
reutn () => {
store.unsubscribe()
}
}, [])
useLayout
More like useEffect, but useEffect queue in requestAnimationFrame
, but useLayout is sync and block commitWork.
useLayout(() => {
document.title = 'count is ' + count
}, [flag])
useMemo
useMemo
has the same parameters as useEffect
, but useMemo
will return a cached value.
function App() {
const [count, setCount] = useState(0)
const val = useMemo(() => {
return new Date()
}, [count])
return (
<div>
<h1>
{count} - {val}
</h1>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
)
}
useCallback
useCallback
is based useMemo
, it will return a cached function.
const cb = useCallback(() => {
console.log('cb was cached')
}, [])
The implement amount to
useMemo(() => cb, deps)
useRef
useRef
will return a function or an object.
function App() {
useEffect(() => {
console.log(t) // { current:<div>t</div> }
})
const t = useRef(null)
return <div ref={t}>t</div>
}
If it use a function, It can return a cleanup and exectes when removed.
function App() {
const t = useRef(dom => {
if (dom) {
doSomething()
} else {
cleanUp()
}
})
return flag && <span ref={t}>I will removed</span>
}
useContext
Context is no need to build in fre core. It can be implemented in user land and has slector and better performance.
Here is an example: use-context-selector
const Context = createContext({
count1: 0,
count2: 0
})
function App() {
const [count, setCount] = useState(Context.value)
return (
<Context.Provider value={count}>
<A />
<B />
<button onClick={() => setCount({ ...count, count1: count.count1 + 1 })}>
+
</button>
</Context.Provider>
)
}
function A() {
const context = useContext(Context, ctx => ctx.count1) // with selector, only execute when count1 changed
console.log('A')
return <div>{context}</div>
}
function B() {
const context = useContext(Context, ctx => ctx.count2)
console.log('B')
return <div>{context}</div>
}
memo
The component can use Fre.memo
, it will compare props shallowly and tell optimization explicitly.
import { memo } from 'fre'
const MemoComponent = memo(() => 'hello world')
Fragments
Fragments will not create dom element.
<>someThing</>
The above code needs babel plugin @babel/plugin-transform-react-jsx
[
"@babel/plugin-transform-react-jsx",
{
"pragma": "h",
"pragmaFrag": "Fragment"
}
]
render props / children
const HelloBox = () => <Box render={value => <h1>{value}</h1>} />
const Box = props => <div>{props.render('hello world!')}</div>
const HelloBox = () => (
<Box>
{value => {
return <h1>{value}</h1>
}}
</Box>
)
const Box = props => <div>{props.children('hello world!')}</div>
Concurrent
Fre implements a tiny priority scheduler, which called Concurrent Mode.
It uses the linked list
data struct to iterate a tree, which can better break, continue, and fallback.
At the same time, it uses double buffering to separate reading and writing.
Of course, the new data struct brings different algorithms and many possibilities.
time slicing
Time slicing is the scheduling of reconcilation, synchronous tasks, sacrifice CPU and reduce blocking time
Suspense
Suspense is the scheduling of promise, asynchronous tasks, break current tasks, and continue tasks after promise resolve
key-based reconcilation
Fre implements a compact reconcilation algorithm support keyed, which also called diff.
It uses hash to mark locations to reduce much size.