Alternative to React, same api and behavior, eg: lifecycle, vnodes data structure, smaller size. Nearly 100% compatible compatibility with React
Alternative to React, same api and behavior, eg: lifecycle, vnodes data structure, without modifying ur business code, but smaller size.
Framework | Minified Size | Gzipped Size | Performance |
---|---|---|---|
React/15.3.1 | 148kb | 43kb | 24/sec |
Qreact | 60kb | 20kb | 30/sec |
npm install qreact
cp node_modules/qreact/dist/qreact.[min.]js yourPRDDir
// also version for react native web which includes PanResponder
cp node_modules/qreact/dist/qreact-react-web.[min.]js yourPRDDir
Any libs of [react,react-dom]/lib/xx
being used, if these is a qreact/lib/xx
version, or qreact.xxx
, should add to alias or externals.
qreact.EventConstants = react-dom/lib/EventConstants;
qreact.SyntheticEvent = react-dom/lib/SyntheticEvent;
qreact.EventPluginRegistry = react-dom/lib/EventPluginRegistry;
qreact.PooledClass = react/lib/PooledClass;
qreact.reactProdInvariant = [react/react-dom]/lib/prodInvariant;
qreact.SyntheticUIEvent = react-dom/lib/SyntheticUIEvent;
qreact.EventPropagators = react-dom/lib/EventPropagators;
qreact.accumulate = react-dom/lib/accumulate;
qreact.EventPluginUtils = react-dom/lib/EventPluginUtils;
qreact.EventPluginHub = react-dom/lib/EventPluginHub;
qreact.EventEmitter = react-dom/lib/ReactBrowserEventEmitter;
exports.config = {
...
externals: {
'react': 'qreact',
'react-dom': 'qreact',
'react-dom/lib/EventConstants': 'qreact.EventConstants',
'react-dom/lib/TouchHistoryMath': 'qreact.TouchHistoryMath',
'react-dom/lib/EventPluginRegistry': 'qreact.EventPluginRegistry',
'react-dom/lib/EventPluginUtils': 'qreact.EventPluginUtils',
'react-dom/lib/ResponderEventPlugin': 'qreact.ResponderEventPlugin',
'react-dom/lib/ResponderTouchHistoryStore': 'qreact.ResponderTouchHistoryStore',
'react-dom/lib/CSSPropertyOperations': 'qreact.CSSPropertyOperations',
'react-dom/lib/ReactBrowserEventEmitter': 'qreact.EventEmitter',
'react/lib/onlyChild': 'qreact.Children.only',
'react/lib/PooledClass': 'qreact.PooledClass',
...
},
resolve: {
alias: {
...
}
}
}
<script type="text/javascript" src="yourPRDDir/qreact[-react-web].[min.]js"></script>
<script type="text/javascript">
xxxx
</script>
Any libs of [react,react-dom]/lib/xx
being used, if these is a qreact/lib/xx
version, should add to alias.
exports.config = {
...
resolve: {
alias: {
'react$': 'qreact',
'react-dom$': 'qreact',
'react-dom/lib/EventConstants': 'qreact/lib/EventConstants',
'react-dom/lib/SyntheticEvent': 'qreact/lib/SyntheticEvent',
'react-dom/lib/EventPluginRegistry': 'qreact/lib/EventPluginRegistry',
'react-dom/lib/SyntheticUIEvent': 'qreact/lib/SyntheticUIEvent',
'react-dom/lib/EventPropagators': 'qreact/lib/EventPropagators',
'react-dom/lib/accumulate': 'qreact/lib/accumulate',
'react-dom/lib/EventPluginUtils': 'qreact/lib/EventPluginUtils',
'react-dom/lib/EventPluginHub': 'qreact/lib/EventPluginHub',
'react-dom/lib/ReactBrowserEventEmitter': 'qreact/lib/ReactBrowserEventEmitter',
...
}
}
}
here is UMD node_modules/qreact/dist/devtools.js
, copy or pack it.
<script src="${path}/devtools.js"></script>
npm install qreact-render-to-string
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
const data = window.__backend_data__;
ReactDOM.render(
<App initData={data}/>,
document.body,
document.getElementById('app')
);
Compatible with Original React import { renderToString } from 'react-dom/server'
, if alias react-dom/server
to qreact-render-to-string
.
import React from 'react';
import { renderToString } from 'qreact-render-to-string';
import App from './App';
const html = renderToString(<App initData={data}/>);
import React, {Component} from 'react';
export default class App extends Component {
render() {
return xxxx
}
}
This config could be shared between Client and Server side.
{
"sourceMaps": true,
"presets": [
"es2015",
],
"plugins": [
["transform-react-jsx"],
["module-resolver", {
"root": ["./"],
"alias": {
"react": "qreact",
"react-dom": "qreact"
}
}]
]
}
Here is qreact-render-to-string example.
Qreact bases on developit [email protected], developit [email protected] and Facebook [email protected].
The core parts, include virtual dom and mechanism of diff base on Preact. We modify the data structure of vnodes and diff algorithm refer to React to bring better diffing and narrow gap with original React.
The event system of Original React is used to replace Preact event binder, also PanResponder is included to support React Native Web.
MIT