diff --git a/README.md b/README.md index 7dd6ce71..97814575 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@

fre logo

Fre

-

:ghost: Tiny React16 like library with Concurrent mode and Suspense.

+

:ghost: Tiny React16 like library with Concurrent and Suspense.

Build Status Code Coverage @@ -12,8 +12,8 @@ ### Feature - :tada: Functional Component and hooks API -- :confetti_ball: Concurrent mode (also called time slicing) and Suspense -- :telescope: keyed reconcilation (also called diff) algorithm +- :confetti_ball: Concurrent and Suspense +- :telescope: keyed reconcilation algorithm ### Introduction @@ -214,43 +214,6 @@ function Counter() { render(, document.getElementById("root")) ``` - -### FunctionalComponent - -functionalComponent is a new components scheme - -```js -function App() { - const [count, setCount] = useState(0) - return ( -

-

{count}

- - -
- ) -} - -function Sex(props) { - const [sex, setSex] = useState("boy") - return ( -
-

{props.count}

-

{sex}

- -
- ) -} - -render(, document.getElementById("root")) -``` - ### props Props are used for component communication @@ -309,7 +272,6 @@ const Box = props =>
{props.children("hello world!")}
If you want to rewrite any function, please use options, such as: ```js -options.end = false options.commitWork = fiber => { // something you will rewrite commitWork } @@ -331,7 +293,7 @@ import { h } from "fre" If browser environment, recommend to use [htm](https://github.com/developit/htm) -#### Concurrent Mode +#### Concurrent Fre implements a tiny priority scheduler, which like react Fiber. It can break the work, and when there are idle time, the work will continue. diff --git a/demo/useContext.js b/demo/useContext.js index 06d944f4..38482bd0 100644 --- a/demo/useContext.js +++ b/demo/useContext.js @@ -1,36 +1,13 @@ -import { createContext, useContext, render, h } from '../src' - -const ctx = createContext(0) +import { useContext, Context, render, h } from 'fre' function App () { - const [count, setCount] = useContext(ctx) - return ( -
-

{count}

- - -
- ) -} - -function Other () { - const [count] = useContext(ctx) - return ( -
-

{count}

- -
- ) -} - -function Thrid () { - const [count, setCount] = useContext(ctx) - return ( -
-

{count}

- -
- ) + const context = useContext(Context) + return
{context}
} -render(, document.getElementById('root')) \ No newline at end of file +render( + + + , + document.body +)