feat: 增加 react-freeze 进行缓存状态下的性能优化

CJY0208 · Nov 16, 2021 · 9915891 · 9915891
1 parent 7724ddc
commit 9915891
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "create-react-context": "^0.3.0",
     "hoist-non-react-statics": "^3.3.0",
     "jsx-ast-utils": "^2.2.1",
+    "react-freeze": "1.0.0",
     "react-node-key": "^0.3.0",
     "szfe-tools": "^0.0.0-beta.7"
   },

diff --git a/src/core/Keeper.js b/src/core/Keeper.js
@@ -1,10 +1,13 @@
-import React, { PureComponent } from 'react'
-import { get, run, isArray, nextTick, EventBus } from 'szfe-tools'
+import React, { PureComponent, Suspense } from 'react'
+import { get, run, nextTick, EventBus } from 'szfe-tools'
+import { Freeze as ReactFreeze } from 'react-freeze'
 
 import Bridge from './Bridge'
 import { AliveNodeProvider } from './context'
 import { LIFECYCLE_ACTIVATE, LIFECYCLE_UNACTIVATE } from './lifecycles'
 
+const Freeze = !!Suspense ? ReactFreeze : ({ children }) => children
+
 export default class Keeper extends PureComponent {
   eventBus = new EventBus()
   listeners = new Map()
@@ -17,6 +20,7 @@ export default class Keeper extends PureComponent {
       children: props.children,
       bridgeProps: props.bridgeProps,
       key: Math.random(),
+      freeze: false,
     }
   }
 
@@ -68,6 +72,9 @@ export default class Keeper extends PureComponent {
   }
 
   [LIFECYCLE_ACTIVATE]() {
+    this.setState({
+      freeze: false,
+    })
     this.eventBus.emit(LIFECYCLE_ACTIVATE)
     this.listeners.forEach((listener) => run(listener, [LIFECYCLE_ACTIVATE]))
   }
@@ -79,6 +86,10 @@ export default class Keeper extends PureComponent {
     listeners
       .reverse()
       .forEach(([, listener]) => run(listener, [LIFECYCLE_UNACTIVATE]))
+
+    this.setState({
+      freeze: true,
+    })
   }
 
   // // 原先打算更新过程中先重置 dom 节点状态，更新后恢复 dom 节点
@@ -171,26 +182,28 @@ export default class Keeper extends PureComponent {
 
   render() {
     const { id, ...props } = this.props
-    const { children, bridgeProps, key } = this.state
+    const { children, bridgeProps, key, freeze } = this.state
 
     return (
-      <div
-        ref={(node) => {
-          this.wrapper = node
-        }}
-      >
-        <div key="keeper-container" nodeKeyIgnore className="ka-content">
-          <Bridge id={id} bridgeProps={bridgeProps}>
-            <AliveNodeProvider value={this.contextValue}>
-              {React.Children.map(children, (child, idx) =>
-                React.cloneElement(child, {
-                  key: `${child.key || ''}:${key}:${idx}`,
-                })
-              )}
-            </AliveNodeProvider>
-          </Bridge>
+      <Freeze freeze={freeze}>
+        <div
+          ref={(node) => {
+            this.wrapper = node
+          }}
+        >
+          <div key="keeper-container" nodeKeyIgnore className="ka-content">
+            <Bridge id={id} bridgeProps={bridgeProps}>
+              <AliveNodeProvider value={this.contextValue}>
+                {React.Children.map(children, (child, idx) =>
+                  React.cloneElement(child, {
+                    key: `${child.key || ''}:${key}:${idx}`,
+                  })
+                )}
+              </AliveNodeProvider>
+            </Bridge>
+          </div>
         </div>
-      </div>
+      </Freeze>
     )
   }
 }