react in typescript.
yarn add @saber2pr/react
- CSR
render Component to DOM in browser.
import React, {
useCallBack,
useMemo,
useReducer,
useRef,
useState
} from "@saber2pr/react"
import ReactDOM from "@saber2pr/react/lib/client"
function HelloMessage({ name }: { name: string }) {
return <div>Hello {name}</div>
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById("container")
)
- SSR
render Component to string.
import React from "@saber2pr/react"
import ReactDOMServer from "@saber2pr/react/lib/server"
const Content = ({ content }: { content: string }) => (
<div>
<div style={{ color: "red" }}>{content}</div>
<button onclick={() => console.log("click")}>click</button>
</div>
)
const App = () => {
return (
<div>
<div>This is a SSR Demo</div>
<Content content="has color" />
</div>
)
}
console.log(ReactDOMServer.renderToString(<App />))
- Custom Render
create a custom renderer.
import React from "@saber2pr/react"
import ReactFiberReconciler from "@saber2pr/react/lib/reconciler"
// use your host config.
const Renderer = ReactFiberReconciler(HostConfig)
const Store = {
state: 0
}
const TestCreateRenderer = () => {
const state = Store.state
return (
<div>
<hr />
<div>This is a UpdateContainer Test</div>
<div>{state}</div>
<button
onclick={() => {
Store.state
// update
Renderer.updateContainer(<TestCreateRenderer />, container)
}}
>
add
</button>
</div>
)
}
// init render
Renderer.createContainer(
<TestCreateRenderer />,
document.getElementById("container")
)
yarn install
yarn start
yarn dev
MIT
Author: saber2pr
项目仅用于理解和学习react原理,不可用于生产实践