javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(react): improving lifecycle hooks to deal with stale closures, fixes #19873 (#19874)

Browse Source
This commit is contained in:
Ely Lucas
2019-11-08 16:15:52 -07:00
committed by Liam DeBeasi
parent 0d40d3f3b7
commit 790eb6e15e
3 changed files with 64 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/react/src/contexts/IonLifeCycleContext.tsx
View File

@ -22,7 +22,7 @@ export const IonLifeCycleContext = /*@__PURE__*/React.createContext<IonLifeCycle
ionViewDidLeave: () => { return; },
});
type LifeCycleCallback = () => void;
export interface LifeCycleCallback { (): void; id?: number; }
export const DefaultIonLifeCycleContext = class implements IonLifeCycleContextInterface {
@ -33,7 +33,16 @@ export const DefaultIonLifeCycleContext = class implements IonLifeCycleContextIn
componentCanBeDestroyedCallback?: () => void;
onIonViewWillEnter(callback: LifeCycleCallback) {
this.ionViewWillEnterCallbacks.push(callback);
if (callback.id) {
const index = this.ionViewWillEnterCallbacks.findIndex(x => x.id === callback.id);
if (index > -1) {
this.ionViewWillEnterCallbacks[index] = callback;
} else {
this.ionViewWillEnterCallbacks.push(callback);
}
} else {
this.ionViewWillEnterCallbacks.push(callback);
}
}
ionViewWillEnter() {
@ -41,7 +50,16 @@ export const DefaultIonLifeCycleContext = class implements IonLifeCycleContextIn
}
onIonViewDidEnter(callback: LifeCycleCallback) {
this.ionViewDidEnterCallbacks.push(callback);
if (callback.id) {
const index = this.ionViewDidEnterCallbacks.findIndex(x => x.id === callback.id);
if (index > -1) {
this.ionViewDidEnterCallbacks[index] = callback;
} else {
this.ionViewDidEnterCallbacks.push(callback);
}
} else {
this.ionViewDidEnterCallbacks.push(callback);
}
}
ionViewDidEnter() {
@ -49,7 +67,16 @@ export const DefaultIonLifeCycleContext = class implements IonLifeCycleContextIn
}
onIonViewWillLeave(callback: LifeCycleCallback) {
this.ionViewWillLeaveCallbacks.push(callback);
if (callback.id) {
const index = this.ionViewWillLeaveCallbacks.findIndex(x => x.id === callback.id);
if (index > -1) {
this.ionViewWillLeaveCallbacks[index] = callback;
} else {
this.ionViewWillLeaveCallbacks.push(callback);
}
} else {
this.ionViewWillLeaveCallbacks.push(callback);
}
}
ionViewWillLeave() {
@ -57,7 +84,16 @@ export const DefaultIonLifeCycleContext = class implements IonLifeCycleContextIn
}
onIonViewDidLeave(callback: LifeCycleCallback) {
this.ionViewDidLeaveCallbacks.push(callback);
if (callback.id) {
const index = this.ionViewDidLeaveCallbacks.findIndex(x => x.id === callback.id);
if (index > -1) {
this.ionViewDidLeaveCallbacks[index] = callback;
} else {
this.ionViewDidLeaveCallbacks.push(callback);
}
} else {
this.ionViewDidLeaveCallbacks.push(callback);
}
}
ionViewDidLeave() {

32
packages/react/src/lifecycle/hooks.ts
View File

@ -1,31 +1,43 @@
import { useContext, useEffect } from 'react';
import { useContext, useEffect, useRef } from 'react';
import { IonLifeCycleContext } from '../contexts/IonLifeCycleContext';
import { IonLifeCycleContext, LifeCycleCallback } from '../contexts/IonLifeCycleContext';
export const useIonViewWillEnter = (callback: () => void) => {
export const useIonViewWillEnter = (callback: LifeCycleCallback, deps: any[] = []) => {
const context = useContext(IonLifeCycleContext);
const id = useRef<number | undefined>();
id.current = id.current || Math.floor(Math.random() * 1000000);
useEffect(() => {
callback.id = id.current!;
context.onIonViewWillEnter(callback);
}, []);
}, deps);
};
export const useIonViewDidEnter = (callback: () => void) => {
export const useIonViewDidEnter = (callback: LifeCycleCallback, deps: any[] = []) => {
const context = useContext(IonLifeCycleContext);
const id = useRef<number | undefined>();
id.current = id.current || Math.floor(Math.random() * 1000000);
useEffect(() => {
callback.id = id.current!;
context.onIonViewDidEnter(callback);
}, []);
}, deps);
};
export const useIonViewWillLeave = (callback: () => void) => {
export const useIonViewWillLeave = (callback: LifeCycleCallback, deps: any[] = []) => {
const context = useContext(IonLifeCycleContext);
const id = useRef<number | undefined>();
id.current = id.current || Math.floor(Math.random() * 1000000);
useEffect(() => {
callback.id = id.current!;
context.onIonViewWillLeave(callback);
}, []);
}, deps);
};
export const useIonViewDidLeave = (callback: () => void) => {
export const useIonViewDidLeave = (callback: LifeCycleCallback, deps: any[] = []) => {
const context = useContext(IonLifeCycleContext);
const id = useRef<number | undefined>();
id.current = id.current || Math.floor(Math.random() * 1000000);
useEffect(() => {
callback.id = id.current!;
context.onIonViewDidLeave(callback);
}, []);
}, deps);
};