react-dom-faster

Render React Component to HTML, without VDOM

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

Difference With renderToStaticMarkup

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

for example: renderToStaticMarkup transform

<div hidden="true" loop="true" capture="true" download="true"></div>

to <div hidden="" loop="" capture="" download=""></div>

react-dom-faster transform

<div hidden="true" loop="true" capture="true" download="true"></div>

to <div hidden="true" loop="true" capture="true" download="true"></div>

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

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 (
            <ul>
                {list.map(item => <li>{item}</li>)}
            </ul>
        );
    }
}
// 注意renderToStaticMarkup 里面需要传入函数，函数返回组件
renderToHtml(() => <Hello list={[1, 2, 3]} />);

The above outputs the following HTML:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

Render jsx to html

// babel config
{
    "plugins": [
        [
            "@babel/plugin-transform-react-jsx",
            {"pragma": "h"}
        ]
    ]
}

import { h } from 'react-dom-faster';
const list = [1, 2, 3];
const { html } = (
    <ul className='container' data-name='ul'>
       {list.map(item => <li>{item}</li>)}
    </ul>
);