Implement markStateDiff property to assure rendering optimizations in…

…side JSONTree
gaearon · Oct 19, 2016 · 4eb3e71 · 4eb3e71
1 parent 6413dfb
commit 4eb3e71
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -54,6 +54,7 @@ Name                  | Description
 `preserveScrollTop`   | When `true`, records the current scroll top every second so it can be restored on refresh. This only has effect when used together with `persistState()` enhancer from Redux DevTools. By default, set to `true`.
 `expandActionRoot`    | When `true`, displays the action object expanded rather than collapsed. By default, set to `false`.
 `expandStateRoot`     | When `true`, displays the state object expanded rather than collapsed. By default, set to `false`.
+`markStateDiff`       | When `true`, mark the state's values which were changed comparing to the previous state. It affects the performance significantly! You might also want to set `expandStateRoot` to `true` as well when enabling it. By default, set to `false`.
 
 ### License
 

diff --git a/src/LogMonitor.js b/src/LogMonitor.js
@@ -60,15 +60,17 @@ export default class LogMonitor extends Component {
       PropTypes.string
     ]),
     expandActionRoot: PropTypes.bool,
-    expandStateRoot: PropTypes.bool
+    expandStateRoot: PropTypes.bool,
+    markStateDiff: PropTypes.bool
   };
 
   static defaultProps = {
     select: (state) => state,
     theme: 'nicinabox',
     preserveScrollTop: true,
     expandActionRoot: false,
-    expandStateRoot: false
+    expandStateRoot: false,
+    markStateDiff: false
   };
 
   shouldComponentUpdate = shouldPureComponentUpdate;
@@ -186,8 +188,9 @@ export default class LogMonitor extends Component {
       computedStates,
       select,
       expandActionRoot,
-      expandStateRoot
-      } = this.props;
+      expandStateRoot,
+      markStateDiff
+    } = this.props;
 
     const entryListProps = {
       theme,
@@ -198,6 +201,7 @@ export default class LogMonitor extends Component {
       select,
       expandActionRoot,
       expandStateRoot,
+      markStateDiff,
       onActionClick: this.handleToggleAction
     };
 

diff --git a/src/LogMonitorEntry.js b/src/LogMonitorEntry.js
@@ -51,30 +51,35 @@ export default class LogMonitorEntry extends Component {
     if (!errorText) {
       try {
         const data = this.props.select(state);
-        const previousData = typeof this.props.previousState !== 'undefined' ?
-          this.props.select(this.props.previousState) :
-          undefined;
-        const getValueStyle = ({ style }, nodeType, keyPath) => ({
-          style: {
-            ...style,
-            ...(dataIsEqual(data, previousData, keyPath) ? {} : styles.changedData)
-          }
-        });
-        const getNestedNodeStyle = ({ style }, keyPath) => ({
-          style: {
-            ...style,
-            ...(keyPath.length > 1 ? {} : styles.root)
-          }
-        });
+        let theme = this.props.theme;
+
+        if (this.props.markStateDiff) {
+          const previousData = typeof this.props.previousState !== 'undefined' ?
+            this.props.select(this.props.previousState) :
+            undefined;
+          const getValueStyle = ({ style }, nodeType, keyPath) => ({
+            style: {
+              ...style,
+              ...(dataIsEqual(data, previousData, keyPath) ? {} : styles.changedData)
+            }
+          });
+          const getNestedNodeStyle = ({ style }, keyPath) => ({
+            style: {
+              ...style,
+              ...(keyPath.length > 1 ? {} : styles.root)
+            }
+          });
+          theme = {
+            extend: this.props.theme,
+            tree: styles.tree,
+            value: getValueStyle,
+            nestedNode: getNestedNodeStyle
+          };
+        }
 
         return (
           <JSONTree
-            theme={{
-              extend: this.props.theme,
-              tree: styles.tree,
-              value: getValueStyle,
-              nestedNode: getNestedNodeStyle
-            }}
+            theme={theme}
             data={data}
             invertTheme={false}
             keyPath={['state']}

diff --git a/src/LogMonitorEntryList.js b/src/LogMonitorEntryList.js
@@ -32,6 +32,7 @@ export default class LogMonitorEntryList extends Component {
       stagedActionIds,
       expandActionRoot,
       expandStateRoot,
+      markStateDiff,
       onActionClick
     } = this.props;
 
@@ -55,6 +56,7 @@ export default class LogMonitorEntryList extends Component {
           error={error}
           expandActionRoot={expandActionRoot}
           expandStateRoot={expandStateRoot}
+          markStateDiff={markStateDiff}
           onActionClick={onActionClick} />
       );
     }