1.引入
import { useActivate } from "react-activation";
2.React Activation
在React中使用react-activation,其实就是类似于Vue中的keep-alive，实现数据的缓存；
源码：
import { ReactNode, ReactNodeArray, Context, Component, ComponentType } from 'react'export declare type GetProps<C> = C extends ComponentType<infer P> ? P : never;export interface KeepAliveProps {children: ReactNode | ReactNodeArrayname?: stringid?: stringcacheKey?: stringwhen?: boolean | Array<boolean> | (() => boolean | Array<boolean>)saveScrollPosition?: boolean | stringautoFreeze?: boolean[key: string]: any
}export declare class KeepAlive extends Component<KeepAliveProps> {}
export default KeepAliveexport declare class AliveScope extends Component<{children: ReactNode | ReactNodeArray
}> {}export declare class NodeKey extends Component<{prefix?: stringonHandleNode?: (node: any, mark?: string) => string | undefined | null
}> {}export function fixContext(context: Context<any>): void
export function createContext<T>(defaultValue: T,calculateChangedBits?: (prev: T, next: T) => number
): Context<T>
// type ContextFixEntry = [host: any, ...methods: any[]]
export function autoFixContext(...configs: any[]): voidexport function useActivate(effect: () => void): void
export function useUnactivate(effect: () => void): voidexport interface CachingNode {createTime: numberupdateTime: numbername?: stringid: string[key: string]: any
}
export interface AliveController {drop: (name: string | RegExp) => Promise<boolean>dropScope: (name: string | RegExp) => Promise<boolean>refresh: (name: string | RegExp) => Promise<boolean>refreshScope: (name: string | RegExp) => Promise<boolean>clear: () => Promise<boolean>getCachingNodes: () => Array<CachingNode>
}
export function useAliveController(): AliveControllerexport declare function withActivation<C extends ComponentType<GetProps<C>>>(component: C): C
export declare function withAliveScope<C extends ComponentType<GetProps<C>>>(component: C): C
- 生命周期函数： 在激活和离开时触发
import { useActivate, useUnactivate, withActivation } from 'react-activation'
- 缓存控制函数
import { withAliveScope, useAliveController } from 'react-activation'
- 使用： 当不同页签下面使用同一个列表数据，当一个页签下的数据改变的时候，另一个使用数据相等的页面在激活页签的时候自动改变，需要使用
useActive()来包裹，就可以实现实时更新的效果。
useActive(() => {getList() // 获取数据
})
)
)
