Skip to content

Commit 945df4d

Browse files
krausestkrausest
committed
added non-keyed react impl
1 parent 9472067 commit 945df4d

File tree

8 files changed

+337
-0
lines changed

8 files changed

+337
-0
lines changed

‎react-v15.4.2-non-keyed/.babelrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
presets: [ "es2015", "react"],
3+
plugins: []
4+
}

‎react-v15.4.2-non-keyed/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>React v15.4.2</title>
6+
<link href="../css/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
7+
<link href="../css/main.css" rel="stylesheet"/>
8+
</head>
9+
<body>
10+
<div id='main'></div>
11+
<script src='dist/main.js'></script>
12+
</body>
13+
</html>

‎react-v15.4.2-non-keyed/package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "js-framework-benchmark-react",
3+
"version": "1.1.1",
4+
"description": "React demo",
5+
"main": "index.js",
6+
"scripts": {
7+
"build-dev": "webpack -w -d -c webpack.config.js",
8+
"build-prod": "webpack -p -c webpack.config.js"
9+
},
10+
"keywords": [
11+
"react",
12+
"webpack"
13+
],
14+
"author": "Stefan Krause",
15+
"license": "Apache-2.0",
16+
"homepage": "https://github.com/krausest/js-framework-benchmark",
17+
"repository": {
18+
"type": "git",
19+
"url": "https://github.com/krausest/js-framework-benchmark.git"
20+
},
21+
"devDependencies": {
22+
"babel-core": "6.21.0",
23+
"babel-loader": "6.2.10",
24+
"babel-preset-es2015": "6.18.0",
25+
"babel-preset-react": "6.16.0",
26+
"webpack": "1.14.0",
27+
"jsx-loader": "0.13.2"
28+
},
29+
"dependencies": {
30+
"react": "15.4.2",
31+
"react-dom": "15.4.2"
32+
}
33+
}

‎react-v15.4.2-non-keyed/src/Main.jsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
'use strict';
2+
3+
var React = require('react');
4+
var ReactDOM = require('react-dom');
5+
const {Row} = require('./Row');
6+
const {Store} = require('./Store');
7+
8+
var startTime;
9+
var lastMeasure;
10+
var startMeasure = function(name) {
11+
startTime = performance.now();
12+
lastMeasure = name;
13+
}
14+
var stopMeasure = function() {
15+
var last = lastMeasure;
16+
if (lastMeasure) {
17+
window.setTimeout(function () {
18+
lastMeasure = null;
19+
var stop = performance.now();
20+
var duration = 0;
21+
console.log(last+" took "+(stop-startTime));
22+
}, 0);
23+
}
24+
}
25+
26+
export class Main extends React.Component{
27+
constructor(props) {
28+
super(props);
29+
this.state = {store: new Store()};
30+
this.select = this.select.bind(this);
31+
this.delete = this.delete.bind(this);
32+
this.add = this.add.bind(this);
33+
this.run = this.run.bind(this);
34+
this.update = this.update.bind(this);
35+
this.runLots = this.runLots.bind(this);
36+
this.clear = this.clear.bind(this);
37+
this.swapRows = this.swapRows.bind(this);
38+
this.start = 0;
39+
}
40+
printDuration() {
41+
stopMeasure();
42+
}
43+
componentDidUpdate() {
44+
this.printDuration();
45+
}
46+
componentDidMount() {
47+
this.printDuration();
48+
}
49+
run() {
50+
startMeasure("run");
51+
this.state.store.run();
52+
this.setState({store: this.state.store});
53+
}
54+
add() {
55+
startMeasure("add");
56+
this.state.store.add();
57+
this.setState({store: this.state.store});
58+
}
59+
update() {
60+
startMeasure("update");
61+
this.state.store.update();
62+
this.setState({store: this.state.store});
63+
}
64+
select(id) {
65+
startMeasure("select");
66+
this.state.store.select(id);
67+
this.setState({store: this.state.store});
68+
}
69+
delete(id) {
70+
startMeasure("delete");
71+
this.state.store.delete(id);
72+
this.setState({store: this.state.store});
73+
}
74+
runLots() {
75+
startMeasure("runLots");
76+
this.state.store.runLots();
77+
this.setState({store: this.state.store});
78+
}
79+
clear() {
80+
startMeasure("clear");
81+
this.state.store.clear();
82+
this.setState({store: this.state.store});
83+
}
84+
swapRows() {
85+
startMeasure("swapRows");
86+
this.state.store.swapRows();
87+
this.setState({store: this.state.store});
88+
}
89+
render () {
90+
let rows = this.state.store.data.map((d,i) => {
91+
return <Row key={i} data={d} onClick={this.select} onDelete={this.delete} styleClass={d.id === this.state.store.selected ? 'danger':''}></Row>
92+
});
93+
return (<div className="container">
94+
<div className="jumbotron">
95+
<div className="row">
96+
<div className="col-md-6">
97+
<h1>React v15.4.2 (non-keyed)</h1>
98+
</div>
99+
<div className="col-md-6">
100+
<div className="row">
101+
<div className="col-sm-6 smallpad">
102+
<button type="button" className="btn btn-primary btn-block" id="run" onClick={this.run}>Create 1,000 rows</button>
103+
</div>
104+
<div className="col-sm-6 smallpad">
105+
<button type="button" className="btn btn-primary btn-block" id="runlots" onClick={this.runLots}>Create 10,000 rows</button>
106+
</div>
107+
<div className="col-sm-6 smallpad">
108+
<button type="button" className="btn btn-primary btn-block" id="add" onClick={this.add}>Append 1,000 rows</button>
109+
</div>
110+
<div className="col-sm-6 smallpad">
111+
<button type="button" className="btn btn-primary btn-block" id="update" onClick={this.update}>Update every 10th row</button>
112+
</div>
113+
<div className="col-sm-6 smallpad">
114+
<button type="button" className="btn btn-primary btn-block" id="clear" onClick={this.clear}>Clear</button>
115+
</div>
116+
<div className="col-sm-6 smallpad">
117+
<button type="button" className="btn btn-primary btn-block" id="swaprows" onClick={this.swapRows}>Swap Rows</button>
118+
</div>
119+
</div>
120+
</div>
121+
</div>
122+
</div>
123+
<table className="table table-hover table-striped test-data">
124+
<tbody>
125+
{rows}
126+
</tbody>
127+
</table>
128+
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
129+
</div>);
130+
}
131+
}

‎react-v15.4.2-non-keyed/src/Row.jsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
'use strict';
2+
3+
var React = require('react');
4+
var ReactDOM = require('react-dom');
5+
6+
window.rowsUpdated = 0;
7+
window.rowsMounted = 0;
8+
9+
export class Row extends React.Component {
10+
constructor(props) {
11+
super(props);
12+
this.onDelete = this.onDelete.bind(this);
13+
this.onClick = this.onClick.bind(this);
14+
}
15+
shouldComponentUpdate(nextProps, nextState) {
16+
return nextProps.data !== this.props.data || nextProps.styleClass !== this.props.styleClass;
17+
}
18+
// componentDidUpdate() {
19+
// window.rowsUpdated++;
20+
// }
21+
// componentDidMount() {
22+
// window.rowsMounted++;
23+
// }
24+
25+
onDelete() {
26+
this.props.onDelete(this.props.data.id);
27+
}
28+
onClick() {
29+
this.props.onClick(this.props.data.id);
30+
}
31+
32+
render() {
33+
let {styleClass, onClick, onDelete, data} = this.props;
34+
return (<tr className={styleClass}>
35+
<td className="col-md-1">{data.id}</td>
36+
<td className="col-md-4">
37+
<a onClick={this.onClick}>{data.label}</a>
38+
</td>
39+
<td className="col-md-1"><a onClick={this.onDelete}><span className="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
40+
<td className="col-md-6"></td>
41+
</tr>);
42+
}
43+
}
44+

‎react-v15.4.2-non-keyed/src/Store.es6.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
'use strict';
2+
3+
function _random(max) {
4+
return Math.round(Math.random()*1000)%max;
5+
}
6+
7+
export class Store {
8+
constructor() {
9+
this.data = [];
10+
this.selected = undefined;
11+
this.id = 1;
12+
}
13+
buildData(count = 1000) {
14+
var adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
15+
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
16+
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
17+
var data = [];
18+
for (var i = 0; i < count; i++)
19+
data.push({id: this.id++, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] });
20+
return data;
21+
}
22+
updateData(mod = 10) {
23+
for (let i=0;i<this.data.length;i+=10) {
24+
this.data[i] = Object.assign({}, this.data[i], {label: this.data[i].label + ' !!!'});
25+
}
26+
}
27+
delete(id) {
28+
const idx = this.data.findIndex(d => d.id==id);
29+
this.data.splice(idx, 1);
30+
}
31+
run() {
32+
this.data = this.buildData();
33+
this.selected = undefined;
34+
}
35+
add() {
36+
this.data = this.data.concat(this.buildData(1000));
37+
}
38+
update() {
39+
this.updateData();
40+
}
41+
select(id) {
42+
this.selected = id;
43+
}
44+
runLots() {
45+
this.data = this.buildData(10000);
46+
this.selected = undefined;
47+
}
48+
clear() {
49+
this.data = [];
50+
this.selected = undefined;
51+
}
52+
swapRows() {
53+
if(this.data.length > 10) {
54+
var a = this.data[4];
55+
this.data[4] = this.data[9];
56+
this.data[9] = a;
57+
}
58+
}
59+
}

‎react-v15.4.2-non-keyed/src/main.es6.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
'use strict';
2+
3+
let React = require('react');
4+
let ReactDOM = require('react-dom');
5+
let {Main} = require('./Main');
6+
7+
ReactDOM.render(React.createElement(Main, {}), document.getElementById('main'));

‎react-v15.4.2-non-keyed/webpack.config.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
'use strict';
2+
require("babel-plugin-syntax-jsx")
3+
4+
var cache = {};
5+
var loaders = [
6+
{
7+
test: /\.jsx$/,
8+
loader: 'babel-loader'
9+
},
10+
{
11+
test: /\.es6\.js$/,
12+
loader: 'babel-loader'
13+
},
14+
{
15+
test: /\.css$/,
16+
loader: 'style-loader!css-loader'
17+
}
18+
];
19+
var extensions = [
20+
'', '.js', '.jsx', '.es6.js'
21+
];
22+
23+
module.exports = [{
24+
cache: cache,
25+
module: {
26+
loaders: loaders
27+
},
28+
entry: {
29+
main: './src/main.es6.js',
30+
},
31+
output: {
32+
path: './dist',
33+
filename: '[name].js'
34+
},
35+
resolve: {
36+
extensions: extensions,
37+
root: [
38+
__dirname,
39+
__dirname + '/src'
40+
],
41+
alias: {
42+
"react": __dirname+"/node_modules/react/dist/react.min.js",
43+
"react-dom": __dirname+"/node_modules/react-dom/dist/react-dom.min.js"
44+
}
45+
}
46+
}];

0 commit comments

Comments
 (0)