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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/266025.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库的基本操作

数据库的基本操作 1创建数据库与查看数据库 创建数据库之前&#xff0c;先查看数据库&#xff1a; 然后使用命令行创建数据库&#xff1a; 再次查看数据库&#xff0c;发现多了一个数据库&#xff1a; 查看数据库基本信息&#xff1a; 2修改数据库 注意&#xff0c;修改…

Git自动忽略dll文件的问题

检查了半天发现是sourcetreee的全局忽略文件导致&#xff0c; 从里面删除dll即可。 我是干脆直接删了全局忽略&#xff0c;太恶心了&#xff0c;如下&#xff1a; #ignore thumbnails created by windows Thumbs.db #Ignore files build by Visual Studio *.exe .vsconfig .s…

使用全局事件总线实现任意组件间的通讯

本文以vue2中爷孙组件通讯为例&#xff0c;需求是点击孙组件的按钮&#xff0c;实现关闭爷组件的弹窗。 全局事件总线是通过Vue实例的事件系统来实现组件之间的通讯&#xff0c;可以方便地在任何组件中进行事件的触发和监听。 以下是使用全局事件总线实现爷孙组件通讯的步骤&a…

初阶数据结构:链表相关题目练习(补充)

目录 1. 单链表相关练习题1.1 移除链表元素1.2 反转链表1.3 链表的中间结点1.4 链表的倒数第k个结点1.5 合并两个有序链表1.6 链表分割1.7 链表的回文结构1.8 相交链表1.9 判断一个链表中是否有环1.10 寻找环状链表相遇点1.11 链表的深度拷贝 1. 单链表相关练习题 注&#xff1…

第一节:Sashulin Message Broker是什么?

一、Sashulin Message Broker简介 Sashulin Message Broker&#xff08;消息代理&#xff0c;简称SMB&#xff09;是一款可编程的消息流处理软件&#xff0c;它使应用程序、系统和服务能够相互通信并交换信息。通过消息传递和转换&#xff0c;实现不同平台和不同语言编写的服务…

登录页设计新选择:毛玻璃和新拟态风格,非2.5D和插画风

登录页给潜在用户传递了产品的品牌调性&#xff0c;是非常重要的一类页面&#xff0c;之前2.5D和插画风格的登录页流行一时&#xff0c;不过这阵风好像过去了&#xff0c;新的风格开始涌现了。 一、越来越流行的毛玻璃设计风格 毛玻璃风格是指将背景模糊处理&#xff0c;使得…

DOM 获取父子节点

DOM 是以树状结构排列的&#xff0c;所以父子关系是相对的&#xff0c;当li为我们的目标节点的时候&#xff0c;ul为其父节点&#xff0c;其他li为它的兄弟节点&#xff0c;li里面包含的标签为子节点&#xff0c;以此类推。 那我们如何找父节点&#xff1f; 元素.parentNode&am…

长江路一号桥的安全监测革新

位于无锡新区的长江路一号桥&#xff0c;自1997年落成以来&#xff0c;一直是多功能的市政要道。大桥北侧连接供气管道&#xff0c;右侧则是城市供水管道&#xff0c;而桥底则设有蓝藻环保监测点。这意味着一旦此桥出现问题&#xff0c;其影响远超交通堵塞的层面。近年来&#…

密码学及其应用(应用篇15)——0/1背包问题

1 问题背景 背包问题是一个经典的优化问题&#xff0c;在计算机科学和运筹学中有着广泛的应用。具体到你提到的这个问题&#xff0c;它是背包问题中的一个特例&#xff0c;通常被称为0/1背包问题。这里&#xff0c;我们有一系列的正整数 &#xff0c;以及一个正整数&#xff0c…

推荐一个 Obsidian 的 ChatGPT 插件

源码地址&#xff1a;https://github.com/nhaouari/obsidian-textgenerator-plugin Text Generator 是目前我使用过的最好的 Obsidian 中的 ChatGPT 功能插件。它旨在智能生成内容&#xff0c;以便轻松记笔记。它不仅可以在 Obsidian 中直接使用 ChatGPT&#xff0c;还提供了优…

《大模型时代-ChatGPT开启通用人工智能浪潮》精华摘抄

原书很长&#xff0c;有19.3w字&#xff0c;本文尝试浓缩一下其中的精华。 知识点 GPT相关 谷歌发布LaMDA、BERT和PaLM-E&#xff0c;PaLM 2 Facebook的母公司Meta推出LLaMA&#xff0c;并在博客上免费公开LLM&#xff1a;OPT-175B。 在GPT中&#xff0c;P代表经过预训练(…

Python入门到精通(九)——Python数据可视化

Python数据可视化 一、JSON数据格式 1、定义 2、python数据和JSON数据转换 二、pyecharts 三、折线图 四、地图 五、动态柱状图 一、JSON数据格式 1、定义 JSON是一种轻量级的数据交互格式。可以按照JSON指定的格式去组织和封装数据JSON本质上是一个带有特定格式的字符…

数仓项目6.0(二)数仓

中间的几步意义就在于&#xff0c;缓存中间处理数据样式&#xff0c;避免重复计算浪费算力 分层 ODS&#xff08;Operate Data Store&#xff09; Spark计算过程中&#xff0c;存在shuffle的操作&#xff0c;而shuffle会将计算过程一分为二&#xff0c;前一阶段不执行完&…

mongo之常用数据库操作

目录 一、准备环境 二、日常记录及执行示范 连接数据库查询版本查询表总数模糊查询(使用正则)查询文档中数据条数排序大于等于查询有哪些库时间查询不在条件内的查询复制数据更新字段名称删除数据库 四、高阶查询 五、备份迁移数据库 总结 一、准备环境 借鉴&#xff1a;…

【机器学习】特征选择之包裹式特征选择法

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…

C++基础知识(六:继承)

首先我们应该知道C的三大特性就是封装、继承和多态。 此篇文章将详细的讲解继承的作用和使用方法。 继承 一个类&#xff0c;继承另一个已有的类&#xff0c;创建的过程 父类(基类)派生出子类(派生类)的过程 继承提高了代码的复用性 【1】继承的格式 class 类名:父类名 {}; 【…

分割回文串 复原IP地址 子集

131.分割回文串 力扣题目链接(opens new window) 给定一个字符串 s&#xff0c;将 s 分割成一些子串&#xff0c;使每个子串都是回文串。 返回 s 所有可能的分割方案。 示例: 输入: "aab" 输出: [ ["aa","b"], ["a","a"…

消息队列RabbitMQ

消息队列 一、起源二、原理预取值死信队列死信 延迟队列应用场景 三、用法 一、起源 消息队列简称MQ(Message Queue)。 假设有一个简单的订单处理系统&#xff0c;涉及三个业务&#xff1a;订单提交、库存更新和支付处理。 如果没有消息队列&#xff0c;订单处理系统可能会按…

nginx(三)实现反向代理客户端 IP透传

正常情况下&#xff0c;客户端去访问代理服务器&#xff0c;然后代理服务器再取访问真实服务器&#xff0c;在真实服务器上&#xff0c;只能显示代理服务器的ip地址&#xff0c;而不显示客户端的ip地址&#xff0c;如果想让客户端的ip地址也能在真实服务端看见&#xff0c;这一…

matlab实现不同窗滤波器示例

1 汉明窗低通滤波器 &#xff1a; 在Matlab中使用汉明窗设计低通滤波器可以通过fir1函数实现。汉明窗通常用于设计滤波器&#xff0c;可以提供更突出的频率特性。 下面是一个示例代码&#xff0c;演示如何在Matlab中使用汉明窗设计低通滤波器&#xff1a; % 定义滤波器参数 fs …