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 | ReactNodeArray
  name?: string
  id?: string
  cacheKey?: string
  when?: boolean | Array<boolean> | (() => boolean | Array<boolean>)
  saveScrollPosition?: boolean | string
  autoFreeze?: boolean
  [key: string]: any
}

export declare class KeepAlive extends Component<KeepAliveProps> {}
export default KeepAlive

export declare class AliveScope extends Component<{
  children: ReactNode | ReactNodeArray
}> {}

export declare class NodeKey extends Component<{
  prefix?: string
  onHandleNode?: (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[]): void

export function useActivate(effect: () => void): void
export function useUnactivate(effect: () => void): void

export interface CachingNode {
  createTime: number
  updateTime: number
  name?: string
  id: 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(): AliveController

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