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 extends ComponentType ? P : never;export interface KeepAliveProps {  children: ReactNode | ReactNodeArray  name?: string  id?: string  cacheKey?: string  when?: boolean | Array | (() => boolean | Array)  saveScrollPosition?: boolean | string  autoFreeze?: boolean  [key: string]: any}export declare class KeepAlive extends Component {}export default KeepAliveexport 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): voidexport function createContext(  defaultValue: T,  calculateChangedBits?: (prev: T, next: T) => number): Context// type ContextFixEntry = [host: any, ...methods: any[]]export function autoFixContext(...configs: any[]): voidexport function useActivate(effect: () => void): voidexport function useUnactivate(effect: () => void): voidexport interface CachingNode {  createTime: number  updateTime: number  name?: string  id: string  [key: string]: any}export interface AliveController {  drop: (name: string | RegExp) => Promise  dropScope: (name: string | RegExp) => Promise  refresh: (name: string | RegExp) => Promise  refreshScope: (name: string | RegExp) => Promise  clear: () => Promise  getCachingNodes: () => Array}export function useAliveController(): AliveControllerexport declare function withActivation(component: C): Cexport declare function withAliveScope(component: C): C

• 生命周期函数： 在激活和离开时触发

  import { useActivate, useUnactivate, withActivation } from 'react-activation'

  • 缓存控制函数

    import { withAliveScope, useAliveController } from 'react-activation'

    • 使用： 当不同页签下面使用同一个列表数据，当一个页签下的数据改变的时候，另一个使用数据相等的页面在激活页签的时候自动改变，需要使用 useActive() 来包裹，就可以实现实时更新的效果。

      useActive(() => {getList()  // 获取数据})