Performance optimisation

Add shouldComponentUpdate for LogMonitorEntry to make it performant
when triggering events rapidly such as onKeyDown.
This commit is contained in:
Dave Coates 2015-10-09 19:45:29 +11:00
parent 0a1458cdbd
commit 0740dfde32
3 changed files with 34 additions and 1 deletions

View File

@ -38,6 +38,7 @@ export default class LogMonitor extends Component {
if (typeof window !== 'undefined') {
window.addEventListener('keydown', ::this.handleKeyPress);
}
this.handleToggleAction = this.handleToggleAction.bind(this);
}
static propTypes = {
@ -173,7 +174,7 @@ export default class LogMonitor extends Component {
previousState={previousState}
collapsed={skippedActions[i]}
error={error}
onActionClick={::this.handleToggleAction} />
onActionClick={this.handleToggleAction} />
);
}

View File

@ -1,6 +1,7 @@
import React, { PropTypes, Component } from 'react';
import JSONTree from 'react-json-tree';
import LogMonitorEntryAction from './LogMonitorEntryAction';
import shallowEqual from '../utils/shallowEqual';
const styles = {
entry: {
@ -23,6 +24,10 @@ export default class LogMonitorEntry extends Component {
collapsed: PropTypes.bool
};
shouldComponentUpdate(nextProps) {
return !shallowEqual(this.props, nextProps);
}
printState(state, error) {
let errorText = error;
if (!errorText) {

27
src/utils/shallowEqual.js Normal file
View File

@ -0,0 +1,27 @@
export default function shallowEqual(objA, objB) {
if (objA === objB) {
return true;
}
if (typeof objA !== 'object' || objA === null ||
typeof objB !== 'object' || objB === null) {
return false;
}
const keysA = Object.keys(objA);
const keysB = Object.keys(objB);
if (keysA.length !== keysB.length) {
return false;
}
// Test for A's keys different from B.
const bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
for (let i = 0; i < keysA.length; i++) {
if (!bHasOwnProperty(keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) {
return false;
}
}
return true;
}