当前位置: 首页 > news >正文

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

相关文章:

React中使用useActive

1.引入 import { useActivate } from "react-activation";2.React Activation 在React中使用react-activation,其实就是类似于Vue中的keep-alive&#xff0c;实现数据的缓存&#xff1b; 源码&#xff1a; import { ReactNode, ReactNodeArray, Context, Component…...

ElasticSearch安装和kibana控制台安装

文章目录 简介ElasticSearch安装环境下载参数密码配置启动 kibana安装修改config/kibana.yml配置 简介 Elasticsearch 是一个分布式文档存储。Elasticsearch 是存储已序列化为 JSON 文档的复杂数据结构。当集群中有多个 Elasticsearch 节点时&#xff0c;存储的文档分布在整个…...

VSCode安装与使用详细教程

一、引言 简要介绍VSCode&#xff08;Visual Studio Code&#xff09;是什么&#xff0c;它的主要特点和用途&#xff0c;以及为什么选择VSCode作为代码编辑器。 二、下载与安装 访问VSCode官方网站下载页面。选择适合操作系统的版本&#xff08;Windows、macOS、Linux&…...

土壤墒情监测站的工作原理

TH-TS600】土壤湿度监测系统是一种用于实时监测土壤湿度的设备系统&#xff0c;通过多个传感器和数据采集设备组合而成。该系统能够安装在农田、果园、草地等不同类型的土壤中&#xff0c;实时监测土壤的水分含量&#xff0c;并将数据传输到数据采集设备中进行记录和分析。 土…...

Flutter 多标签页显示 有关TabController需要知道的知识

背景 很多应用都需要导航栏加多个标签页的方式来构建一个多页显示逻辑&#xff0c;比如购物软件常有&#xff1a;已完成&#xff0c;已发货&#xff0c;待付款三个顶部导航按钮&#xff0c;点击则下面的页面显示不同属性的订单 正文 在flutter中&#xff0c;实现这样的功能需…...

【Elasticsearch专栏 16】深入探索:Elasticsearch的Master选举机制及其影响因素分析

Elasticsearch&#xff0c;作为当今最流行的开源搜索和分析引擎&#xff0c;以其分布式、可扩展和高可用的特性赢得了广大开发者的青睐。在Elasticsearch的分布式架构中&#xff0c;集群的稳健性和高可用性很大程度上依赖于其Master节点的选举机制。本文将深入剖析Elasticsearc…...

Leetcode : 215. 数组中的第 K 个最大元素

给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 你必须设计并实现时间复杂度为 O(n) 的算法解决此问题。 思路&#xff1a;最开始排序算法&…...

node express实现Excel文档转json文件

有些场景我们需要将Excel文档中的内容抽取出来生成别的文件&#xff0c;作为一个前端&#xff0c;服务框架最应该熟悉的就是node了&#xff0c;以下是基于多语言转换实现代码&#xff0c;看明白原理自己改一改就能用了 1.安装node环境 2.创建一个文件夹&#xff0c;文件夹中创建…...

【算法分析与设计】最大二叉树

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其值为 nums 中的最…...

面试问答总结之并发编程

文章目录 &#x1f412;个人主页&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;&#x1f380;多线程的优点、缺点&#x1f415;并发编程的核心问题 &#xff1a;不可见性、乱序性、非原子性&#x1fa80;不可见性&#x1fa80;乱序性&#x1fa80;非原子性&#x1…...

红外测温仪芯片方案开发设计

红外测温仪由光学系统、光电探测器、信号放大器及信号处理、显示输出等部分组成。光学系统汇集其视场内的目标红外辐射能量&#xff0c;视场的大小由测温仪的光学零件以及位置决定。被测物体辐射的红外首先进入测温仪的光学系统&#xff0c;再由光学系统汇聚射入的红外线&#…...

五、数组——Java基础篇

五、数组 1、数组元素的遍历 1.1数组的遍历&#xff1a;将数组内的元素展现出来 1、普通for遍历&#xff1a;根据下表获取数组内的元素 2、增强for遍历&#xff1a; for&#xff08;数据元素类型 变量名&#xff1a;数组名&#xff09;{ 变量名&#xff1a;数组内的每一个值…...

如何用golang写一个自己的后端框架

如果你想要不使用任何现有的后端框架,完全从头开始创建一个后端框架,你需要实现Web服务器的基本组件,比如路由器、请求处理、中间件支持等。以下是一个简单的指南,用于创建一个基本的、不使用任何外部框架的Go后端框架。 步骤 1: 设置工作环境 确保你已经安装了Go语言环境…...

linux 如何给服务器批量做免密,如何批量挂在磁盘

前提条件 所有机器网络互通&#xff0c;且已做了免密登录 linux服务器批量做免密脚本如下 #!/bin/bash # 定义服务器列表文件 SERVERS_FILE"host" # 定义生成的密钥的存储目录 KEY_DIR"/root/.ssh" # 检查是否输入了文件路径 if [ $# -ne 1 ]; then …...

Android Activity的生命周期详解

在Android开发中&#xff0c;了解Activity的生命周期是非常重要的&#xff0c;它决定了Activity在不同状态下的行为和处理逻辑。Android中的Activity生命周期包括多个方法&#xff0c;每个方法都代表了Activity在特定状态下的行为。下面我们来逐一介绍这些方法及其对应的生命周…...

python学习笔记-内置类型

Python内置类型是Python编程语言中自带的基本数据类型&#xff0c;它们用于存储和处理数据。其中包括数字、序列、映射、类、实例和异常等主要类型。 在这些内置类型中&#xff0c;有一些是可变的&#xff0c;它们具有修改自身内容的能力&#xff0c;比如添加、移除或重排成员…...

校园微社区微信小程序源码/二手交易/兼职交友微信小程序源码

云开发校园微社区微信小程序开源源码&#xff0c;这是一款云开发校园微社区-二手交易_兼职_交友_项目微信小程序开源源码&#xff0c;可以给你提供快捷方便的校园生活&#xff0c;有很多有趣实用的板块和功能&#xff0c;如&#xff1a;闲置交易、表白交友、疑问互答、任务兼职…...

如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件

简介 单一职责原则是指应用程序的各个部分应该只有一个目的。遵循这个原则可以使您的 Angular 应用程序更容易测试和开发。 在 Angular 中&#xff0c;使用 NgTemplateOutlet 而不是创建特定组件&#xff0c;可以使组件在不修改组件本身的情况下轻松修改为各种用例。 在本文…...

改进的yolo交通标志tt100k数据集目标检测(代码+原理+毕设可用)

YOLO TT100K: 基于YOLO训练的交通标志检测模型 在原始代码基础上&#xff1a; 修改数据加载类&#xff0c;支持CoCo格式&#xff08;使用cocoapi&#xff09;&#xff1b;修改数据增强&#xff1b;validation增加mAP计算&#xff1b;修改anchor&#xff1b; 注: 实验开启weig…...

nginx 日志,压缩,https功能介绍

一&#xff0c; 自定义访问日志 &#xff08;一&#xff09;日志位置存放 1&#xff0c;格式 2&#xff0c; 级别 level: debug, info, notice, warn, error, crit, alert, emerg 3&#xff0c;示例 服务机定义 错误日志存放位置 客户机错误访问 查看错误日志 4&#xff…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...