mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-25 02:53:53 +03:00
Performance optimisation
Add shouldComponentUpdate for LogMonitorEntry to make it performant when triggering events rapidly such as onKeyDown.
This commit is contained in:
parent
0a1458cdbd
commit
0740dfde32
|
@ -38,6 +38,7 @@ export default class LogMonitor extends Component {
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
window.addEventListener('keydown', ::this.handleKeyPress);
|
window.addEventListener('keydown', ::this.handleKeyPress);
|
||||||
}
|
}
|
||||||
|
this.handleToggleAction = this.handleToggleAction.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
@ -173,7 +174,7 @@ export default class LogMonitor extends Component {
|
||||||
previousState={previousState}
|
previousState={previousState}
|
||||||
collapsed={skippedActions[i]}
|
collapsed={skippedActions[i]}
|
||||||
error={error}
|
error={error}
|
||||||
onActionClick={::this.handleToggleAction} />
|
onActionClick={this.handleToggleAction} />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import React, { PropTypes, Component } from 'react';
|
import React, { PropTypes, Component } from 'react';
|
||||||
import JSONTree from 'react-json-tree';
|
import JSONTree from 'react-json-tree';
|
||||||
import LogMonitorEntryAction from './LogMonitorEntryAction';
|
import LogMonitorEntryAction from './LogMonitorEntryAction';
|
||||||
|
import shallowEqual from '../utils/shallowEqual';
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
entry: {
|
entry: {
|
||||||
|
@ -23,6 +24,10 @@ export default class LogMonitorEntry extends Component {
|
||||||
collapsed: PropTypes.bool
|
collapsed: PropTypes.bool
|
||||||
};
|
};
|
||||||
|
|
||||||
|
shouldComponentUpdate(nextProps) {
|
||||||
|
return !shallowEqual(this.props, nextProps);
|
||||||
|
}
|
||||||
|
|
||||||
printState(state, error) {
|
printState(state, error) {
|
||||||
let errorText = error;
|
let errorText = error;
|
||||||
if (!errorText) {
|
if (!errorText) {
|
||||||
|
|
27
src/utils/shallowEqual.js
Normal file
27
src/utils/shallowEqual.js
Normal 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;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user