react-dom-faster

$3

react-dom/server renderToStaticMarkup transform vdom to html, spend much time.
react-dom-faster join the html of component without vdom, has high performance.

$3

react-dom-faster does not make additional conversions for html attribute.

for example:
renderToStaticMarkup transform
``



`
to


react-dom-faster transform
`



`
to

---

react-dom-faster vs renderToStaticMarkup

Environment： node(v11.9.0) react-dom(v16.8.3)

| jsx div(个) | react-dom-faster time | renderToStaticMarkup time |
| ------ | :------: | :------: |
| 100 | ≈1ms | ≈3ms |
| 500 | ≈1.5ms | ≈4ms |
| 1000 | ≈2ms | ≈7.5ms |
| 5000 | ≈10ms | ≈25ms |

---

Installation

Via npm:

npm install --save react-dom-faster

---

Usage

#### Direct generate html from react component

`js
import React from 'react';
import renderToHtml from 'react-dom-faster';

class Hello extends React.Component {
constructor (props) {
super(props);
}
render () {
const { list } = this.props;
return (


{list.map(item =>
• {item}
)}


);
}
}
// 注意renderToStaticMarkup 里面需要传入函数，函数返回组件
renderToHtml(() => );
`
The above outputs the following HTML:
`html

• 1


• 2


• 3

`

#### Render jsx to html
`json
// babel config
{
"plugins": [
[
"@babel/plugin-transform-react-jsx",
{"pragma": "h"}
]
]
}
`
`js
import { h } from 'react-dom-faster';
const list = [1, 2, 3];
const { html } = (


{list.map(item =>
• {item}
)}

);

`
The above outputs the following HTML:
`html


• 1


• 2


• 3


``