Commit 0a6f08ca authored by Shen Chang's avatar Shen Chang

fix(fix cache error):

parent 38b4d116
import React from 'react'; import React from 'react';
import {keepAlive, bindLifecycle} from '../../../es';
export default class Test extends React.Component { @keepAlive()
class B extends React.Component {
componentWillMount() { componentWillMount() {
console.log('B componentWillMount'); console.log('B componentWillMount');
} }
...@@ -36,3 +38,5 @@ export default class Test extends React.Component { ...@@ -36,3 +38,5 @@ export default class Test extends React.Component {
); );
} }
} }
export default B;
import React from 'react'; import React from 'react';
import {keepAlive} from '../../../es';
export default class Test extends React.Component { class C extends React.Component {
componentWillMount() { componentWillMount() {
console.log('C componentWillMount'); console.log('C componentWillMount');
} }
...@@ -35,4 +36,6 @@ export default class Test extends React.Component { ...@@ -35,4 +36,6 @@ export default class Test extends React.Component {
<div>This is c.</div> <div>This is c.</div>
); );
} }
} }
\ No newline at end of file
export default keepAlive()(C);
...@@ -58,22 +58,19 @@ export default function keepAliveDecorator({ ...@@ -58,22 +58,19 @@ export default function keepAliveDecorator({
forwardRef = false, forwardRef = false,
}: IOptions = {}) { }: IOptions = {}) {
return (Component: React.ComponentType<IComponentProps>) => { return (Component: React.ComponentType<IComponentProps>) => {
const WrappedComponent = (Component as any).WrappedComponent || (Component as any).wrappedComponent || Component;
const { const {
componentDidMount = noop, componentDidMount = noop,
componentDidUpdate = noop, componentDidUpdate = noop,
componentDidActivate = noop,
componentWillUnactivate = noop, componentWillUnactivate = noop,
componentWillUnmount = noop, componentWillUnmount = noop,
} = WrappedComponent.prototype; } = Component.prototype;
const displayName = (name || getDisplayName(Component)) as any; const displayName = (name || getDisplayName(Component)) as any;
if (!displayName) { 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.'); 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.');
} }
WrappedComponent.prototype.componentDidMount = function () { Component.prototype.componentDidMount = function () {
const { const {
_container, _container,
keepAlive, keepAlive,
...@@ -86,6 +83,7 @@ export default function keepAliveDecorator({ ...@@ -86,6 +83,7 @@ export default function keepAliveDecorator({
notNeedActivate(); notNeedActivate();
const cb = () => { const cb = () => {
mount.call(this); mount.call(this);
listen.call(this);
eventEmitter.off([identification, START_MOUNTING_DOM], cb); eventEmitter.off([identification, START_MOUNTING_DOM], cb);
}; };
eventEmitter.on([identification, START_MOUNTING_DOM], cb); eventEmitter.on([identification, START_MOUNTING_DOM], cb);
...@@ -94,25 +92,7 @@ export default function keepAliveDecorator({ ...@@ -94,25 +92,7 @@ export default function keepAliveDecorator({
this.componentDidActivate(); this.componentDidActivate();
} }
}; };
WrappedComponent.prototype.componentDidActivate = function () { Component.prototype.componentDidUpdate = function () {
const {
_container,
} = this.props;
const {
identification,
eventEmitter,
} = _container;
componentDidActivate.call(this);
eventEmitter.on(
[identification, COMMAND.CURRENT_UNMOUNT],
this._bindUnmount = this.componentWillUnmount.bind(this),
);
eventEmitter.on(
[identification, COMMAND.CURRENT_UNACTIVATE],
this._bindUnactivate = this.componentWillUnactivate.bind(this),
);
};
WrappedComponent.prototype.componentDidUpdate = function () {
componentDidUpdate.call(this); componentDidUpdate.call(this);
const { const {
_container, _container,
...@@ -124,21 +104,24 @@ export default function keepAliveDecorator({ ...@@ -124,21 +104,24 @@ export default function keepAliveDecorator({
if (isNeedActivate()) { if (isNeedActivate()) {
notNeedActivate(); notNeedActivate();
mount.call(this); mount.call(this);
listen.call(this);
this._unmounted = false; this._unmounted = false;
this.componentDidActivate(); this.componentDidActivate();
} }
}; };
WrappedComponent.prototype.componentWillUnactivate = function () { Component.prototype.componentWillUnactivate = function () {
componentWillUnactivate.call(this); componentWillUnactivate.call(this);
unmount.call(this); unmount.call(this);
unlisten.call(this);
}; };
WrappedComponent.prototype.componentWillUnmount = function () { Component.prototype.componentWillUnmount = function () {
// Because we will manually call the componentWillUnmount lifecycle // Because we will manually call the componentWillUnmount lifecycle
// so we need to prevent it from firing multiple times // so we need to prevent it from firing multiple times
if (!this._unmounted) { if (!this._unmounted) {
this._unmounted = true; this._unmounted = true;
componentWillUnmount.call(this); componentWillUnmount.call(this);
unmount.call(this); unmount.call(this);
unlisten.call(this);
} }
}; };
...@@ -163,12 +146,9 @@ export default function keepAliveDecorator({ ...@@ -163,12 +146,9 @@ export default function keepAliveDecorator({
storeElement, storeElement,
cache, cache,
setLifecycle, setLifecycle,
eventEmitter,
}, },
} = this.props; } = this.props;
const {renderElement, ifStillActivate, reactivate} = cache[identification]; const {renderElement, ifStillActivate, reactivate} = cache[identification];
eventEmitter.off([identification, COMMAND.CURRENT_UNMOUNT], this._bindUnmount);
eventEmitter.off([identification, COMMAND.CURRENT_UNACTIVATE], this._bindUnactivate);
setLifecycle(LIFECYCLE.UNMOUNTED); setLifecycle(LIFECYCLE.UNMOUNTED);
changePositionByComment(identification, storeElement, renderElement); changePositionByComment(identification, storeElement, renderElement);
if (ifStillActivate) { if (ifStillActivate) {
...@@ -176,6 +156,34 @@ export default function keepAliveDecorator({ ...@@ -176,6 +156,34 @@ export default function keepAliveDecorator({
} }
} }
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> { class TriggerLifecycleContainer extends React.PureComponent<ITriggerLifecycleContainerProps> {
private identification: string; private identification: string;
...@@ -476,7 +484,7 @@ export default function keepAliveDecorator({ ...@@ -476,7 +484,7 @@ export default function keepAliveDecorator({
)); ));
} }
(KeepAlive as any).WrappedComponent = WrappedComponent; (KeepAlive as any).WrappedComponent = Component;
KeepAlive.displayName = `${keepAliveDisplayName}(${displayName})`; KeepAlive.displayName = `${keepAliveDisplayName}(${displayName})`;
return hoistNonReactStatics(KeepAlive, Component); return hoistNonReactStatics(KeepAlive, Component);
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment