fix: switch page error

demo/src/index.js

@@ -43,7 +43,7 @@ function App() {
         <Route
           path="/b"
           render={() => (
-            <KeepAlive name="A"><B /></KeepAlive>
+            <KeepAlive name="A"><B /><B /></KeepAlive>
 
           )}
         />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-keep-alive",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Package will allow components to maintain their status, to avoid repeated re-rendering.",
   "author": "Shen Chang",
   "homepage": "https://github.com/Sam618/react-keep-alive",
@@ -37,8 +37,7 @@
   "dependencies": {
     "@types/js-md5": "^0.4.2",
     "hoist-non-react-statics": "^3.3.0",
-    "js-md5": "^0.7.3",
-    "react-deep-force-update": "^2.1.3"
+    "js-md5": "^0.7.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",

src/components/AsyncComponent.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import deepForceUpdate from 'react-deep-force-update';
+import {bindLifecycleTypeName} from '../utils/bindLifecycle';
 
 interface IProps {
-  setMounted: any;
-  getMounted: any;
-  correctionPosition: any;
+  setMounted: (value: boolean) => void;
+  getMounted: () => boolean;
+  onUpdate: () => void;
 }
 
 interface IState {
@@ -16,13 +16,44 @@ export default class AsyncComponent extends React.Component<IProps, IState> {
     component: null,
   };
 
+  /**
+   * Force update child nodes
+   *
+   * @private
+   * @returns
+   * @memberof AsyncComponent
+   */
+  private forceUpdateChildren() {
+    if (!this.props.children) {
+      return;
+    }
+    const root: any = (this as any)._reactInternalFiber || (this as any)._reactInternalInstance;
+    let node = root.child;
+    let sibling = node;
+    while (sibling) {
+      while (true) {
+        if (node.type && node.type.displayName && node.type.displayName.indexOf(bindLifecycleTypeName) !== -1) {
+          return;
+        }
+        if (node.stateNode) {
+          break;
+        }
+        node = node.child;
+      }
+      if (typeof node.type === 'function') {
+        node.stateNode.forceUpdate();
+      }
+      sibling = sibling.sibling;
+    }
+  }
+
   public componentDidMount() {
     const {children} = this.props;
     Promise.resolve().then(() => this.setState({component: children}));
   }
 
   public componentDidUpdate() {
-    this.props.correctionPosition();
+    this.props.onUpdate();
   }
 
   // Delayed update
@@ -36,7 +67,7 @@ export default class AsyncComponent extends React.Component<IProps, IState> {
     Promise.resolve().then(() => {
       if (this.props.getMounted()) {
         this.props.setMounted(false);
-        deepForceUpdate(this);
+        this.forceUpdateChildren();
       }
     });
     return false;

src/components/KeepAlive.tsx

@@ -104,7 +104,9 @@ class KeepAlive extends React.PureComponent<IKeepAliveInnerProps> {
     if (this.ref && this.ref.parentNode && this.ref.nextSibling) {
       const childNodes = this.ref.childNodes as any;
       this.refNextSibling = this.ref.nextSibling;
-      for (const child of childNodes) {
+      this.childNodes = [];
+      while (childNodes.length) {
+        const child = childNodes[0];
         this.childNodes.push(child);
         this.ref.parentNode.insertBefore(child, this.ref.nextSibling);
       }
@@ -183,7 +185,7 @@ class KeepAlive extends React.PureComponent<IKeepAliveInnerProps> {
         <AsyncComponent
           setMounted={this.setMounted}
           getMounted={this.getMounted}
-          correctionPosition={this.correctionPosition}
+          onUpdate={this.correctionPosition}
         >
           {this.props.children}
         </AsyncComponent>

src/components/Provider.tsx

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 import Comment from './Comment';
 import KeepAliveContext from '../contexts/KeepAliveContext';
 import createEventEmitter from '../utils/createEventEmitter';
-import {warn} from '../utils/debug';
 import createUniqueIdentification from '../utils/createUniqueIdentification';
 import createStoreElement from '../utils/createStoreElement';
 
@@ -94,12 +93,6 @@ export default class KeepAliveProvider extends React.PureComponent<IKeepAlivePro
     this.forceUpdate();
   }
 
-  public componentDidCatch(_: any, info: any) {
-    if (info.componentStack.indexOf(keepAliveProviderTypeName) !== -1) {
-      warn('[React Keep Alive] Cached components have duplicates. Please check the <KeepAlive> component of the key duplication!');
-    }
-  }
-
   public unactivate = (identification: string) => {
     const {cache} = this;
     this.cache[identification] = {

src/utils/bindLifecycle.tsx

@@ -6,6 +6,8 @@ import {COMMAND} from './keepAliveDecorator';
 import withIdentificationContextConsumer from './withIdentificationContextConsumer';
 import getDisplayName from './getDisplayName';
 
+export const bindLifecycleTypeName = '$$bindLifecycle';
+
 export default function bindLifecycle<P = any>(Component: React.ComponentClass<P>) {
   const WrappedComponent = (Component as any).WrappedComponent || (Component as any).wrappedComponent || Component;
 
@@ -59,6 +61,7 @@ export default function bindLifecycle<P = any>(Component: React.ComponentClass<P
   // In order to be able to re-update after transferring the DOM, we need to block the first update.
   WrappedComponent.prototype.shouldComponentUpdate = function (...args: any) {
     if (this._needActivate) {
+      this.forceUpdate();
       return false;
     }
     return shouldComponentUpdate.call(this, ...args) || true;
@@ -129,7 +132,7 @@ export default function bindLifecycle<P = any>(Component: React.ComponentClass<P
   ));
 
   (BindLifecycle as any).WrappedComponent = WrappedComponent;
-  BindLifecycle.displayName = `bindLifecycle(${getDisplayName(Component)})`;
+  BindLifecycle.displayName = `${bindLifecycleTypeName}(${getDisplayName(Component)})`;
   return hoistNonReactStatics(
     BindLifecycle,
     Component,