React中使用useActive

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()  // 获取数据
})