refactor(Add < KeepAlive > Components and delete keepAlive higher-order components):

demo/src/index.js

@@ -6,7 +6,7 @@ import {
   Link,
   BrowserRouter as Router,
 } from 'react-router-dom';
-import {Provider} from '../../es';
+import {Provider, KeepAlive} from '../../es';
 import A from './views/A';
 import B from './views/B';
 import C from './views/C';
@@ -58,18 +58,24 @@ class App extends React.Component {
           <Route
             path="/a"
             render={() => (
-              <React.Fragment>
-                <A keepAlive={toggle} />
-              </React.Fragment>
+              <KeepAlive key="A" disabled={!toggle}>
+                <A />
+              </KeepAlive>
             )}
           />
           <Route
             path="/b"
-            render={() => <B />}
+            render={() => (
+              <B />
+            )}
           />
           <Route
             path="/c"
-            render={() => <C />}
+            render={() => (
+              <KeepAlive key="C">
+                <C />
+              </KeepAlive>
+            )}
           />
         </Switch>
       </div>

demo/src/views/A.js

 import React from 'react';
-import {keepAlive, bindLifecycle} from '../../../es';
+import {bindLifecycle} from '../../../es';
 
 @bindLifecycle
 class Content extends React.Component {
@@ -40,7 +40,7 @@ class Content extends React.Component {
   }
 }
 
-@keepAlive()
+@bindLifecycle
 class Test extends React.Component {
   state = {
     index: 0,

demo/src/views/B.js

 import React from 'react';
-import {keepAlive, bindLifecycle} from '../../../es';
+import {bindLifecycle} from '../../../es';
 
-@keepAlive()
+@bindLifecycle
 class B extends React.Component {
   componentWillMount() {
     console.log('B componentWillMount');

demo/src/views/C.js

 import React from 'react';
-import {keepAlive} from '../../../es';
+import {bindLifecycle} from '../../../es';
 
+@bindLifecycle
 class C extends React.Component {
   componentWillMount() {
     console.log('C componentWillMount');
@@ -38,4 +39,4 @@ class C extends React.Component {
   }
 }
 
-export default keepAlive()(C);
+export default C;

package.json

 {
   "name": "react-keep-alive",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "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",

src/components/Consumer.tsx

@@ -3,7 +3,6 @@ import Comment from './Comment';
 import {LIFECYCLE, ICache, ICacheItem} from './Provider';
 import {warn} from '../utils/debug';
 import findDOMNodeByFiberNode from '../utils/findDOMNodeByFiberNode';
-import createUniqueIdentification from '../utils/createUniqueIdentification';
 
 interface IConsumerProps {
   children: React.ReactNode;
@@ -19,9 +18,6 @@ class Consumer extends React.PureComponent<IConsumerProps> {
 
   private identification: string = this.props.identification;
 
-  // This attribute is designed to prevent duplicates of the identification of KeepAlive components.
-  private key: string = createUniqueIdentification();
-
   constructor(props: IConsumerProps, ...args: any) {
     super(props, ...args);
     const {cache, setCache, children} = props;
@@ -43,7 +39,6 @@ class Consumer extends React.PureComponent<IConsumerProps> {
       children,
       keepAlive,
       lifecycle: LIFECYCLE.MOUNTED,
-      key: this.key,
       renderElement: this.renderElement,
       activated: true,
     });

src/components/KeepAlive.tsx

+import React from 'react';
+import noop from '../utils/noop';
+import keepAlive, {IKeepAliveComponentProps} from '../utils/keepAlive';
+
+export const keepAliveDisplayName = '$$KeepAlive';
+
+interface IKeepAliveProps extends IKeepAliveComponentProps {
+  key: string;
+  onActivate?: () => void;
+  onUnactivate?: () => void;
+}
+
+class KeepAlive extends React.PureComponent<IKeepAliveProps> {
+  public displayName = keepAliveDisplayName;
+
+  public static defaultProps = {
+    onActivate: noop,
+    onUnactivate: noop,
+  };
+
+  public componentDidActivate() {
+    (this.props as any).onActivate();
+  }
+
+  public componentWillUnactivate() {
+    (this.props as any).onUnactivate();
+  }
+
+  public render() {
+    return this.props.children;
+  }
+}
+
+export default keepAlive(KeepAlive) as React.ComponentClass<IKeepAliveProps>;

src/components/Provider.tsx

@@ -7,7 +7,7 @@ import {warn} from '../utils/debug';
 import createUniqueIdentification from '../utils/createUniqueIdentification';
 import createStoreElement from '../utils/createStoreElement';
 
-export const keepAliveProviderTypeName = 'KeepAliveProvider';
+export const keepAliveProviderTypeName = '$$KeepAliveProvider';
 export const START_MOUNTING_DOM = 'startMountingDOM';
 
 export enum LIFECYCLE {
@@ -20,7 +20,6 @@ export interface ICacheItem {
   children: React.ReactNode;
   keepAlive: boolean;
   lifecycle: LIFECYCLE;
-  key?: string | null;
   renderElement?: HTMLElement;
   activated?: boolean;
   ifStillActivate?: boolean;
@@ -87,10 +86,6 @@ export default class KeepAliveProvider extends React.PureComponent<IKeepAlivePro
   public setCache = (identification: string, value: ICacheItem) => {
     const {cache, keys} = this;
     const currentCache = cache[identification];
-    const key = currentCache && currentCache.key;
-    if (key && value.key && key !== (value.key as unknown)) {
-      warn('[React Keep Alive] Cached components have duplicates.');
-    }
     if (!currentCache) {
       keys.push(identification);
     }
@@ -101,6 +96,10 @@ export default class KeepAliveProvider extends React.PureComponent<IKeepAlivePro
     this.forceUpdate();
   }
 
+  public componentDidCatch() {
+    warn('[React Keep Alive] Cached components have duplicates. Please check the <KeepAlive> component of the key duplication!');
+  }
+
   // private getMax = () => {
   //   return this.props.max ? parseInt(this.props.max) : null;
   // }
@@ -126,7 +125,6 @@ export default class KeepAliveProvider extends React.PureComponent<IKeepAlivePro
     const {cache} = this;
     this.cache[identification] = {
       ...cache[identification],
-      key: null,
       activated: false,
       lifecycle: LIFECYCLE.UNMOUNTED,
     };

src/index.ts

 import Provider from './components/Provider';
-import keepAlive from './utils/keepAlive';
+import KeepAlive from './components/KeepAlive';
 import bindLifecycle from './utils/bindLifecycle';
 
 export {
   Provider,
-  keepAlive,
+  KeepAlive,
   bindLifecycle,
 };

src/utils/bindLifecycle.tsx

@@ -5,7 +5,7 @@ import {COMMAND} from './keepAlive';
 import withIdentificationContextConsumer from './withIdentificationContextConsumer';
 import getDisplayName from './getDisplayName';
 
-export default function bindLifecycle<P = any>(Component: React.ComponentType<P>) {
+export default function bindLifecycle<P = any>(Component: React.ComponentClass<P>) {
   const WrappedComponent = (Component as any).WrappedComponent || (Component as any).wrappedComponent || Component;
 
   const {
@@ -111,7 +111,7 @@ export default function bindLifecycle<P = any>(Component: React.ComponentType<P>
         : null
     ),
   );
-  const BindLifecycle = React.forwardRef((props, ref) => (
+  const BindLifecycle = React.forwardRef((props: P, ref) => (
     <BindLifecycleHOC {...props} forwardRef={ref} />
   ));
 

src/utils/getContextIdentificationByFiberNode.ts

-import React from 'react';
-import {keepAliveProviderTypeName} from '../components/Provider';
-import {keepAliveDisplayName} from './keepAlive';
-
-export default function getContextIdentificationByFiberNode(fiberNode: any) {
-  let globalKey: React.Key | null = null;
-  let typeNames = '';
-  function getPathsByFiberNode(fiberNode: any) {
-    if (!fiberNode) {
-      return '';
-    }
-    const {
-      type,
-      key,
-      index,
-    } = fiberNode;
-    const typeName = type && type.displayName;
-    if (typeName === keepAliveProviderTypeName) {
-      return '';
-    }
-    const joinName: string = getPathsByFiberNode(fiberNode.return);
-    if (type && type.displayName && type.displayName.indexOf(keepAliveDisplayName) !== -1) {
-      if (!globalKey) {
-        globalKey = key;
-      }
-    }
-    typeNames += typeName;
-    return `${key || index}${joinName}`;
-  }
-  const paths = getPathsByFiberNode(fiberNode);
-  return {
-    paths,
-    globalKey,
-    typeNames,
-  };
-}

src/utils/getDisplayName.ts

 import React from 'react';
 
 export default function getDisplayName(Component: React.ComponentType) {
-  return Component.displayName || Component.name || null;
+  return Component.displayName || Component.name || 'Component';
 }

src/utils/getKeyByFiberNode.ts

+import {WithKeepAliveContextConsumerDisplayName} from './withKeepAliveContextConsumer';
+
+export default function getKeyByFiberNode(fiberNode: any): string | null {
+  if (!fiberNode) {
+    return null;
+  }
+  const {
+    key,
+    type,
+  } = fiberNode;
+  if (type.displayName && type.displayName.indexOf(WithKeepAliveContextConsumerDisplayName) !== -1) {
+    return key;
+  }
+  return getKeyByFiberNode(fiberNode.return);
+}

src/utils/keepAlive.tsx

@@ -6,12 +6,11 @@ import {START_MOUNTING_DOM, LIFECYCLE} from '../components/Provider';
 import md5 from './md5';
 import noop from './noop';
 import {warn} from './debug';
-import getContextIdentificationByFiberNode from './getContextIdentificationByFiberNode';
-import withIdentificationContextConsumer, {IIdentificationContextComponentProps} from './withIdentificationContextConsumer';
-import withKeepAliveContextConsumer, {IKeepAliveContextComponentProps} from './withKeepAliveContextConsumer';
+import getKeyByFiberNode from './getKeyByFiberNode';
+import withIdentificationContextConsumer, {IIdentificationContextConsumerComponentProps} from './withIdentificationContextConsumer';
+import withKeepAliveContextConsumer, {IKeepAliveContextConsumerComponentProps} from './withKeepAliveContextConsumer';
 import changePositionByComment from './changePositionByComment';
 import shallowEqual from './shallowEqual';
-import getDisplayName from './getDisplayName';
 import getKeepAlive from './getKeepAlive';
 
 export enum COMMAND {
@@ -22,470 +21,432 @@ export enum COMMAND {
   CURRENT_UNACTIVATE = 'current_unactivate',
 }
 
-export interface IOptions {
-  name?: string;
-  forwardRef?: boolean;
-}
-
-export const keepAliveDisplayName = 'keepAlive';
+export const keepAliveDisplayName = '$$KeepAlive';
 
-interface IKeepAliveDecorativeComponentProps {
-  keepAlive?: boolean;
+export interface IKeepAliveComponentProps {
+  disabled?: boolean;
 }
 
-interface IListenUpperKeepAliveContainerProps extends IKeepAliveDecorativeComponentProps, IIdentificationContextComponentProps, IKeepAliveContextComponentProps {
-  forwardedRef?: React.Ref<{}>;
-}
+interface IListenUpperKeepAliveContainerProps extends IKeepAliveComponentProps, IIdentificationContextConsumerComponentProps, IKeepAliveContextConsumerComponentProps {}
 
 interface IListenUpperKeepAliveContainerState {
   activated: boolean;
 }
 
-interface ITriggerLifecycleContainerProps extends IKeepAliveContextComponentProps {
-  forwardedRef?: React.Ref<{}>;
+interface ITriggerLifecycleContainerProps extends IKeepAliveContextConsumerComponentProps {
+  propKey: string;
   keepAlive: boolean;
   getCombinedKeepAlive: () => boolean;
 }
 
-interface IComponentProps {
-  _container: object;
-  keepAlive: boolean;
-  ref: React.Ref<{}>;
-}
+export default (Component: React.ComponentType<any>) => {
+  const {
+    componentDidMount = noop,
+    componentDidUpdate = noop,
+    componentWillUnactivate = noop,
+    componentWillUnmount = noop,
+  } = Component.prototype;
 
-export default function keepAliveDecorator({
-  name,
-  forwardRef = false,
-}: IOptions = {}) {
-  return (Component: React.ComponentType<IComponentProps>) => {
+  Component.prototype.componentDidMount = function () {
+    const {
+      _container,
+      keepAlive,
+    } = this.props;
     const {
-      componentDidMount = noop,
-      componentDidUpdate = noop,
-      componentWillUnactivate = noop,
-      componentWillUnmount = noop,
-    } = Component.prototype;
-    const displayName = (name || getDisplayName(Component)) as any;
-
-    if (!displayName) {
-      warn('[React Keep Alive] Each component must have a name, which can be the component\'s displayName or name static property. You can also configure name when keepAlive decorates the component.');
+      notNeedActivate,
+      identification,
+      eventEmitter,
+    } = _container;
+    notNeedActivate();
+    const cb = () => {
+      mount.call(this);
+      listen.call(this);
+      eventEmitter.off([identification, START_MOUNTING_DOM], cb);
+    };
+    eventEmitter.on([identification, START_MOUNTING_DOM], cb);
+    componentDidMount.call(this);
+    if (keepAlive) {
+      this.componentDidActivate();
     }
-
-    Component.prototype.componentDidMount = function () {
-      const {
-        _container,
-        keepAlive,
-      } = this.props;
-      const {
-        notNeedActivate,
-        identification,
-        eventEmitter,
-      } = _container;
+  };
+  Component.prototype.componentDidUpdate = function () {
+    componentDidUpdate.call(this);
+    const {
+      _container,
+    } = this.props;
+    const {
+      notNeedActivate,
+      isNeedActivate,
+    } = _container;
+    if (isNeedActivate()) {
       notNeedActivate();
-      const cb = () => {
-        mount.call(this);
-        listen.call(this);
-        eventEmitter.off([identification, START_MOUNTING_DOM], cb);
-      };
-      eventEmitter.on([identification, START_MOUNTING_DOM], cb);
-      componentDidMount.call(this);
-      if (keepAlive) {
-        this.componentDidActivate();
-      }
-    };
-    Component.prototype.componentDidUpdate = function () {
-      componentDidUpdate.call(this);
-      const {
-        _container,
-      } = this.props;
-      const {
-        notNeedActivate,
-        isNeedActivate,
-      } = _container;
-      if (isNeedActivate()) {
-        notNeedActivate();
-        mount.call(this);
-        listen.call(this);
-        this._unmounted = false;
-        this.componentDidActivate();
-      }
-    };
-    Component.prototype.componentWillUnactivate = function () {
-      componentWillUnactivate.call(this);
+      mount.call(this);
+      listen.call(this);
+      this._unmounted = false;
+      this.componentDidActivate();
+    }
+  };
+  Component.prototype.componentWillUnactivate = function () {
+    componentWillUnactivate.call(this);
+    unmount.call(this);
+    unlisten.call(this);
+  };
+  Component.prototype.componentWillUnmount = function () {
+    // Because we will manually call the componentWillUnmount lifecycle
+    // so we need to prevent it from firing multiple times
+    if (!this._unmounted) {
+      this._unmounted = true;
+      componentWillUnmount.call(this);
       unmount.call(this);
       unlisten.call(this);
-    };
-    Component.prototype.componentWillUnmount = function () {
-      // Because we will manually call the componentWillUnmount lifecycle
-      // so we need to prevent it from firing multiple times
-      if (!this._unmounted) {
-        this._unmounted = true;
-        componentWillUnmount.call(this);
-        unmount.call(this);
-        unlisten.call(this);
-      }
-    };
+    }
+  };
 
-    function mount(this: any) {
-      const {
-        _container: {
-          cache,
-          identification,
-          storeElement,
-          setLifecycle,
-        },
-      } = this.props;
-      const {renderElement} = cache[identification];
-      setLifecycle(LIFECYCLE.UPDATING);
-      changePositionByComment(identification, renderElement, storeElement);
+  function mount(this: any) {
+    const {
+      _container: {
+        cache,
+        identification,
+        storeElement,
+        setLifecycle,
+      },
+    } = this.props;
+    const {renderElement} = cache[identification];
+    setLifecycle(LIFECYCLE.UPDATING);
+    changePositionByComment(identification, renderElement, storeElement);
+  }
+
+  function unmount(this: any) {
+    const {
+      _container: {
+        identification,
+        storeElement,
+        cache,
+        setLifecycle,
+      },
+    } = this.props;
+    const {renderElement, ifStillActivate, reactivate} = cache[identification];
+    setLifecycle(LIFECYCLE.UNMOUNTED);
+    changePositionByComment(identification, storeElement, renderElement);
+    if (ifStillActivate) {
+      reactivate();
     }
+  }
 
-    function unmount(this: any) {
+  function listen(this: any) {
+    const {
+      _container: {
+        identification,
+        eventEmitter,
+      },
+    } = this.props;
+    eventEmitter.on(
+      [identification, COMMAND.CURRENT_UNMOUNT],
+      this._bindUnmount = this.componentWillUnmount.bind(this),
+    );
+    eventEmitter.on(
+      [identification, COMMAND.CURRENT_UNACTIVATE],
+      this._bindUnactivate = this.componentWillUnactivate.bind(this),
+    );
+  }
+
+  function unlisten(this: any) {
+    const {
+      _container: {
+        identification,
+        eventEmitter,
+      },
+    } = this.props;
+    eventEmitter.off([identification, COMMAND.CURRENT_UNMOUNT], this._bindUnmount);
+    eventEmitter.off([identification, COMMAND.CURRENT_UNACTIVATE], this._bindUnactivate);
+  }
+
+  class TriggerLifecycleContainer extends React.PureComponent<ITriggerLifecycleContainerProps> {
+    private identification: string;
+
+    private activated = false;
+
+    private ifStillActivate = false;
+
+    // Let the lifecycle of the cached component be called normally.
+    private needActivate = true;
+
+    private lifecycle = LIFECYCLE.MOUNTED;
+
+    public componentDidMount() {
+      if (!this.ifStillActivate) {
+        this.activate();
+      }
       const {
-        _container: {
-          identification,
-          storeElement,
-          cache,
-          setLifecycle,
+        keepAlive,
+        _keepAliveContextProps: {
+          eventEmitter,
         },
       } = this.props;
-      const {renderElement, ifStillActivate, reactivate} = cache[identification];
-      setLifecycle(LIFECYCLE.UNMOUNTED);
-      changePositionByComment(identification, storeElement, renderElement);
-      if (ifStillActivate) {
-        reactivate();
+      if (keepAlive) {
+        this.needActivate = true;
+        eventEmitter.emit([this.identification, COMMAND.ACTIVATE]);
       }
     }
 
-    function listen(this: any) {
-      const {
-        _container: {
-          identification,
-          eventEmitter,
-        },
-      } = this.props;
-      eventEmitter.on(
-        [identification, COMMAND.CURRENT_UNMOUNT],
-        this._bindUnmount = this.componentWillUnmount.bind(this),
-      );
-      eventEmitter.on(
-        [identification, COMMAND.CURRENT_UNACTIVATE],
-        this._bindUnactivate = this.componentWillUnactivate.bind(this),
-      );
+    public componentDidCatch() {
+      if (!this.activated) {
+        this.activate();
+      }
     }
 
-    function unlisten(this: any) {
+    public componentWillUnmount() {
       const {
-        _container: {
-          identification,
+        getCombinedKeepAlive,
+        _keepAliveContextProps: {
           eventEmitter,
+          isExisted,
         },
       } = this.props;
-      eventEmitter.off([identification, COMMAND.CURRENT_UNMOUNT], this._bindUnmount);
-      eventEmitter.off([identification, COMMAND.CURRENT_UNACTIVATE], this._bindUnactivate);
-    }
-
-    class TriggerLifecycleContainer extends React.PureComponent<ITriggerLifecycleContainerProps> {
-      private identification: string;
-
-      private activated = false;
-
-      private ifStillActivate = false;
-
-      // Let the lifecycle of the cached component be called normally.
-      private needActivate = true;
-
-      private lifecycle = LIFECYCLE.MOUNTED;
-
-      public componentDidMount() {
-        if (!this.ifStillActivate) {
-          this.activate();
-        }
-        const {
-          keepAlive,
-          _keepAliveContextProps: {
-            eventEmitter,
-          },
-        } = this.props;
-        if (keepAlive) {
-          this.needActivate = true;
-          eventEmitter.emit([this.identification, COMMAND.ACTIVATE]);
-        }
+      const keepAlive = getCombinedKeepAlive();
+      if (!keepAlive || !isExisted()) {
+        eventEmitter.emit([this.identification, COMMAND.CURRENT_UNMOUNT]);
+        eventEmitter.emit([this.identification, COMMAND.UNMOUNT]);
       }
-
-      public componentDidCatch() {
-        if (!this.activated) {
-          this.activate();
-        }
-      }
-
-      public componentWillUnmount() {
-        const {
-          getCombinedKeepAlive,
-          _keepAliveContextProps: {
-            eventEmitter,
-            isExisted,
-          },
-        } = this.props;
-        const keepAlive = getCombinedKeepAlive();
-        if (!keepAlive || !isExisted()) {
-          eventEmitter.emit([this.identification, COMMAND.CURRENT_UNMOUNT]);
-          eventEmitter.emit([this.identification, COMMAND.UNMOUNT]);
-        }
-        // When the Provider components are unmounted, the cache is not needed,
-        // so you don't have to execute the componentWillUnactivate lifecycle.
-        if (keepAlive && isExisted()) {
-          eventEmitter.emit([this.identification, COMMAND.CURRENT_UNACTIVATE]);
-          eventEmitter.emit([this.identification, COMMAND.UNACTIVATE]);
-        }
+      // When the Provider components are unmounted, the cache is not needed,
+      // so you don't have to execute the componentWillUnactivate lifecycle.
+      if (keepAlive && isExisted()) {
+        eventEmitter.emit([this.identification, COMMAND.CURRENT_UNACTIVATE]);
+        eventEmitter.emit([this.identification, COMMAND.UNACTIVATE]);
       }
+    }
 
-      private activate = () => {
-        this.activated = true;
-      }
+    private activate = () => {
+      this.activated = true;
+    }
 
-      private reactivate = () => {
-        this.ifStillActivate = false;
-        this.forceUpdate();
-      }
+    private reactivate = () => {
+      this.ifStillActivate = false;
+      this.forceUpdate();
+    }
 
-      private isNeedActivate = () => {
-        return this.needActivate;
-      }
+    private isNeedActivate = () => {
+      return this.needActivate;
+    }
 
-      private notNeedActivate = () => {
-        this.needActivate = false;
-      }
+    private notNeedActivate = () => {
+      this.needActivate = false;
+    }
 
-      private getLifecycle = () => {
-        return this.lifecycle;
-      }
+    private getLifecycle = () => {
+      return this.lifecycle;
+    }
 
-      private setLifecycle = (lifecycle: LIFECYCLE) => {
-        this.lifecycle = lifecycle;
-      }
+    private setLifecycle = (lifecycle: LIFECYCLE) => {
+      this.lifecycle = lifecycle;
+    }
 
-      public render() {
-        if (!this.identification) {
-          // We need to generate a corresponding unique identifier based on the information of the component.
-          const {
-            providerIdentification,
-            cache,
-          } = this.props._keepAliveContextProps;
-          const {
-            paths,
-            globalKey,
-            typeNames,
-          } = getContextIdentificationByFiberNode((this as any)._reactInternalFiber);
-          this.identification = md5(
-            `${providerIdentification}${displayName}${globalKey ? `${globalKey}${typeNames}` : paths}`,
-          );
-          // The last activated component must be unactivated before it can be activated again.
-          const currentCache = cache[this.identification];
-          if (currentCache) {
-            this.ifStillActivate = currentCache.activated as boolean;
-            currentCache.ifStillActivate = this.ifStillActivate;
-            currentCache.reactivate = this.reactivate;
-          }
+    public render() {
+      const {
+        propKey,
+        keepAlive,
+        getCombinedKeepAlive,
+        _keepAliveContextProps: {
+          isExisted,
+          storeElement,
+          cache,
+          eventEmitter,
+          setCache,
+          unactivate,
+          providerIdentification,
+        },
+        ...wrapperProps
+      } = this.props;
+      if (!this.identification) {
+        // We need to generate a corresponding unique identifier based on the information of the component.
+        this.identification = md5(
+          `${providerIdentification}${propKey}`,
+        );
+        // The last activated component must be unactivated before it can be activated again.
+        const currentCache = cache[this.identification];
+        if (currentCache) {
+          this.ifStillActivate = currentCache.activated as boolean;
+          currentCache.ifStillActivate = this.ifStillActivate;
+          currentCache.reactivate = this.reactivate;
         }
-        const {
-          isNeedActivate,
-          notNeedActivate,
-          activated,
-          getLifecycle,
-          setLifecycle,
-          identification,
-          ifStillActivate,
-        } = this;
-        const {
-          keepAlive,
-          forwardedRef,
-          getCombinedKeepAlive,
-          _keepAliveContextProps: {
-            isExisted,
-            storeElement,
-            cache,
-            eventEmitter,
-            setCache,
-            unactivate,
-          },
-          ...wrapperProps
-        } = this.props;
-        return !ifStillActivate
-          ? (
-            <Consumer
-              identification={identification}
-              keepAlive={keepAlive}
-              cache={cache}
-              setCache={setCache}
-              unactivate={unactivate}
+      }
+      const {
+        isNeedActivate,
+        notNeedActivate,
+        activated,
+        getLifecycle,
+        setLifecycle,
+        identification,
+        ifStillActivate,
+      } = this;
+      return !ifStillActivate
+        ? (
+          <Consumer
+            identification={identification}
+            keepAlive={keepAlive}
+            cache={cache}
+            setCache={setCache}
+            unactivate={unactivate}
+          >
+            <IdentificationContext.Provider
+              value={{
+                identification,
+                eventEmitter,
+                keepAlive,
+                activated,
+                getLifecycle,
+                isExisted,
+              }}
             >
-              <IdentificationContext.Provider
-                value={{
-                  identification,
+              <Component
+                {...wrapperProps}
+                keepAlive={keepAlive}
+                _container={{
+                  isNeedActivate,
+                  notNeedActivate,
+                  setLifecycle,
                   eventEmitter,
-                  keepAlive,
-                  activated,
-                  getLifecycle,
-                  isExisted,
+                  identification,
+                  storeElement,
+                  cache,
                 }}
-              >
-                <Component
-                  {...wrapperProps}
-                  keepAlive={keepAlive}
-                  ref={forwardedRef as React.Ref<{}>}
-                  _container={{
-                    isNeedActivate,
-                    notNeedActivate,
-                    setLifecycle,
-                    eventEmitter,
-                    identification,
-                    storeElement,
-                    cache,
-                  }}
-                />
-              </IdentificationContext.Provider>
-            </Consumer>
-          )
-        : null;
-      }
+              />
+            </IdentificationContext.Provider>
+          </Consumer>
+        )
+      : null;
     }
+  }
 
-    class ListenUpperKeepAliveContainer extends React.Component<IListenUpperKeepAliveContainerProps, IListenUpperKeepAliveContainerState> {
-      private combinedKeepAlive: boolean;
+  class ListenUpperKeepAliveContainer extends React.Component<IListenUpperKeepAliveContainerProps, IListenUpperKeepAliveContainerState> {
+    private combinedKeepAlive: boolean;
 
-      public state = {
-        activated: true,
-      };
+    public state = {
+      activated: true,
+    };
 
-      private activate: () => void;
+    private activate: () => void;
 
-      private unactivate: () => void;
+    private unactivate: () => void;
 
-      private unmount: () => void;
+    private unmount: () => void;
 
-      public shouldComponentUpdate(nextProps: IListenUpperKeepAliveContainerProps, nextState: IListenUpperKeepAliveContainerState) {
-        if (this.state.activated !== nextState.activated) {
-          return true;
-        }
-        const {
-          _keepAliveContextProps,
-          _identificationContextProps,
-          ...rest
-        } = this.props;
-        const {
-          _keepAliveContextProps: nextKeepAliveContextProps,
-          _identificationContextProps: nextIdentificationContextProps,
-          ...nextRest
-        } = nextProps;
-        if (!shallowEqual(rest, nextRest)) {
-          return true;
-        }
-        if (
-          !shallowEqual(_keepAliveContextProps, nextKeepAliveContextProps) ||
-          !shallowEqual(_identificationContextProps, nextIdentificationContextProps)
-        ) {
-          return true;
-        }
-        return false;
+    public shouldComponentUpdate(nextProps: IListenUpperKeepAliveContainerProps, nextState: IListenUpperKeepAliveContainerState) {
+      if (this.state.activated !== nextState.activated) {
+        return true;
       }
-
-      public componentDidMount() {
-        this.listenUpperKeepAlive();
+      const {
+        _keepAliveContextProps,
+        _identificationContextProps,
+        ...rest
+      } = this.props;
+      const {
+        _keepAliveContextProps: nextKeepAliveContextProps,
+        _identificationContextProps: nextIdentificationContextProps,
+        ...nextRest
+      } = nextProps;
+      if (!shallowEqual(rest, nextRest)) {
+        return true;
       }
-
-      public componentWillUnmount() {
-        this.unlistenUpperKeepAlive();
+      if (
+        !shallowEqual(_keepAliveContextProps, nextKeepAliveContextProps) ||
+        !shallowEqual(_identificationContextProps, nextIdentificationContextProps)
+      ) {
+        return true;
       }
+      return false;
+    }
 
-      private listenUpperKeepAlive() {
-        const {identification, eventEmitter} = this.props._identificationContextProps;
-        if (!identification) {
-          return;
-        }
-        eventEmitter.on(
-          [identification, COMMAND.ACTIVATE],
-          this.activate = () => this.setState({activated: true}),
-          true,
-        );
-        eventEmitter.on(
-          [identification, COMMAND.UNACTIVATE],
-          this.unactivate = () => this.setState({activated: false}),
-          true,
-        );
-        eventEmitter.on(
-          [identification, COMMAND.UNMOUNT],
-          this.unmount = () => this.setState({activated: false}),
-          true,
-        );
-      }
+    public componentDidMount() {
+      this.listenUpperKeepAlive();
+    }
 
-      private unlistenUpperKeepAlive() {
-        const {identification, eventEmitter} = this.props._identificationContextProps;
-        if (!identification) {
-          return;
-        }
-        eventEmitter.off([identification, COMMAND.ACTIVATE], this.activate);
-        eventEmitter.off([identification, COMMAND.UNACTIVATE], this.unactivate);
-        eventEmitter.off([identification, COMMAND.UNMOUNT], this.unmount);
-      }
+    public componentWillUnmount() {
+      this.unlistenUpperKeepAlive();
+    }
 
-      private getCombinedKeepAlive = () => {
-        return this.combinedKeepAlive;
+    private listenUpperKeepAlive() {
+      const {identification, eventEmitter} = this.props._identificationContextProps;
+      if (!identification) {
+        return;
       }
+      eventEmitter.on(
+        [identification, COMMAND.ACTIVATE],
+        this.activate = () => this.setState({activated: true}),
+        true,
+      );
+      eventEmitter.on(
+        [identification, COMMAND.UNACTIVATE],
+        this.unactivate = () => this.setState({activated: false}),
+        true,
+      );
+      eventEmitter.on(
+        [identification, COMMAND.UNMOUNT],
+        this.unmount = () => this.setState({activated: false}),
+        true,
+      );
+    }
 
-      public render() {
-        const {
-          _identificationContextProps: {
-            identification,
-            keepAlive: upperKeepAlive,
-            getLifecycle,
-          },
-          keepAlive,
-          ...wrapperProps
-        } = this.props;
-        const {activated} = this.state;
-        const {
-          _keepAliveContextProps: {
-            include,
-            exclude,
-          },
-        } = wrapperProps;
-        // When the parent KeepAlive component is mounted or unmounted,
-        // use the keepAlive prop of the parent KeepAlive component.
-        const newKeepAlive = getKeepAlive(displayName, include, exclude, keepAlive);
-        this.combinedKeepAlive = getLifecycle === undefined || getLifecycle() === LIFECYCLE.UPDATING
-          ? newKeepAlive
-          : identification
-            ? upperKeepAlive && newKeepAlive
-            : newKeepAlive;
-        return activated
-          ? (
-            <TriggerLifecycleContainer
-              {...wrapperProps}
-              keepAlive={this.combinedKeepAlive}
-              getCombinedKeepAlive={this.getCombinedKeepAlive}
-            />
-          )
-          : null;
+    private unlistenUpperKeepAlive() {
+      const {identification, eventEmitter} = this.props._identificationContextProps;
+      if (!identification) {
+        return;
       }
+      eventEmitter.off([identification, COMMAND.ACTIVATE], this.activate);
+      eventEmitter.off([identification, COMMAND.UNACTIVATE], this.unactivate);
+      eventEmitter.off([identification, COMMAND.UNMOUNT], this.unmount);
     }
 
-    const ListenUpperKeepAliveContainerHOC: any = withKeepAliveContextConsumer(
-      withIdentificationContextConsumer(ListenUpperKeepAliveContainer)
-    );
+    private getCombinedKeepAlive = () => {
+      return this.combinedKeepAlive;
+    }
 
-    let KeepAlive: React.ComponentType<IKeepAliveDecorativeComponentProps> = ListenUpperKeepAliveContainerHOC;
-    if (forwardRef) {
-      KeepAlive = React.forwardRef((props, ref) => (
-        <ListenUpperKeepAliveContainerHOC
-          {...props}
-          forwardedRef={ref}
-        />
-      ));
+    public render() {
+      const {
+        _identificationContextProps: {
+          identification,
+          keepAlive: upperKeepAlive,
+          getLifecycle,
+        },
+        disabled,
+        ...wrapperProps
+      } = this.props;
+      const {activated} = this.state;
+      const {
+        _keepAliveContextProps: {
+          include,
+          exclude,
+        },
+      } = wrapperProps;
+      // When the parent KeepAlive component is mounted or unmounted,
+      // use the keepAlive prop of the parent KeepAlive component.
+      const propKey = getKeyByFiberNode((this as any)._reactInternalFiber);
+      if (!propKey) {
+        warn('[React Keep Alive] <KeepAlive> components must have key.');
+        return null;
+      }
+      const newKeepAlive = getKeepAlive(propKey, include, exclude, !disabled);
+      this.combinedKeepAlive = getLifecycle === undefined || getLifecycle() === LIFECYCLE.UPDATING
+        ? newKeepAlive
+        : identification
+          ? upperKeepAlive && newKeepAlive
+          : newKeepAlive;
+      return activated
+        ? (
+          <TriggerLifecycleContainer
+            {...wrapperProps}
+            propKey={propKey}
+            keepAlive={this.combinedKeepAlive}
+            getCombinedKeepAlive={this.getCombinedKeepAlive}
+          />
+        )
+        : null;
     }
+  }
 
-    (KeepAlive as any).WrappedComponent = Component;
-    KeepAlive.displayName = `${keepAliveDisplayName}(${displayName})`;
-    return hoistNonReactStatics(KeepAlive, Component);
-  };
-}
+  const KeepAlive = withKeepAliveContextConsumer(
+    withIdentificationContextConsumer(ListenUpperKeepAliveContainer)
+  ) as any;
+
+  return hoistNonReactStatics(KeepAlive, Component);
+};

src/utils/withIdentificationContextConsumer.tsx

@@ -11,17 +11,19 @@ export interface IIdentificationContextProps {
   isExisted: () => boolean;
 }
 
-export interface IIdentificationContextComponentProps {
+export interface IIdentificationContextConsumerComponentProps {
   _identificationContextProps: IIdentificationContextProps;
 }
 
-export default function withIdentificationContextConsumer<P = any>(Component: React.ComponentType<IIdentificationContextComponentProps & P>) {
-  const NewComponent = (props: P) => (
+export const withIdentificationContextConsumerDisplayName = 'withIdentificationContextConsumer';
+
+export default function withIdentificationContextConsumer<P = any>(Component: React.ComponentType<IIdentificationContextConsumerComponentProps & P>) {
+  const WithIdentificationContextConsumer = (props: P) => (
     <IdentificationContext.Consumer>
       {(contextProps: IIdentificationContextProps) => <Component _identificationContextProps={contextProps} {...props} />}
     </IdentificationContext.Consumer>
   );
 
-  NewComponent.displayName = `withIdentificationContextConsumer(${getDisplayName(Component)})`;
-  return NewComponent;
+  WithIdentificationContextConsumer.displayName = `${withIdentificationContextConsumerDisplayName}(${getDisplayName(Component)})`;
+  return WithIdentificationContextConsumer;
 }

src/utils/withKeepAliveContextConsumer.tsx

@@ -5,17 +5,19 @@ import getDisplayName from './getDisplayName';
 
 type IKeepAliveContextProps = IKeepAliveProviderImpl & IKeepAliveProviderProps;
 
-export interface IKeepAliveContextComponentProps {
+export interface IKeepAliveContextConsumerComponentProps {
   _keepAliveContextProps: IKeepAliveContextProps;
 }
 
-export default function withKeepAliveContextConsumer<P = any>(Component: React.ComponentType<IKeepAliveContextComponentProps & P>) {
-  const NewComponent = (props: P) => (
+export const WithKeepAliveContextConsumerDisplayName = 'withKeepAliveContextConsumer';
+
+export default function withKeepAliveContextConsumer<P = any>(Component: React.ComponentType<IKeepAliveContextConsumerComponentProps & P>) {
+  const WithKeepAliveContextConsumer = (props: P) => (
     <KeepAliveContext.Consumer>
       {(contextProps: IKeepAliveContextProps) => <Component _keepAliveContextProps={contextProps} {...props} />}
     </KeepAliveContext.Consumer>
   );
 
-  NewComponent.displayName = `withKeepAliveContextConsumer(${getDisplayName(Component)})`;
-  return NewComponent;
+  WithKeepAliveContextConsumer.displayName = `${WithKeepAliveContextConsumerDisplayName}(${getDisplayName(Component)})`;
+  return WithKeepAliveContextConsumer;
 }