实现一个自定义 hook,用于强制刷新当前组件

写在前面

在 react 中,如果 state 数据发生变化,我们知道,会重新渲染该组件。

但是这个前提是我们需要依赖 state 数据的变化,那比如我们并不想定义 state,又或者说我们的操作不能引起 state 的变化,此时我们也想刷新组件怎么办?

这里我们就来实现一个自定义的 hooks,它的作用就是强制刷新当前组件

实现

如果想刷新组件,很重要的一点就是改变 state,当 state 的值发生变化时,组件会重新渲染。

一个重要的点:react hook 和组件的关系

  • 当在组件中使用一个自定义 hook 时,这个 hook 的状态和逻辑会成为该组件的一部分。
  • 具体来说,hook 内部的状态会被管理在使用这个 hook 的组件的状态树中。

通俗点说就是,我们自定义一个 hook,并且在组件中使用,那这个 hook 的 state 也会成为这个组件的一部分,也就是 hook 的 state 变化,会引起使用该 hook 的组件的变化。

说的太多可能还不明白,我们直接看代码。

hook

我们先自定义一个hook,实现原理就是利用 state 的变化,每次调用该 hook 的时候,state 的值都会发生变化。

  • 使用 useState 来存储一个计数器 tick。
  • setTick 每次调用时会增加计数器,这会触发组件重新渲染。
  • 使用 useCallback 确保 forceUpdate 函数在组件的整个生命周期内保持相同的引用。
  • 返回 forceUpdate 函数,以便在使用这个 hook 的组件中调用它。
import { useState, useCallback } from "react"; 
const useForceUpdate = () => { 
const [, setTick] = useState(0); 
// 只需要 setTick 函数,不需要 tick 值
const forceUpdate = useCallback(() => { 
setTick(tick => tick + 1); // 使用回调函数来确保更新基于最新状态 
}, []); 
return forceUpdate; // 返回 forceUpdate 函数 
}; 
export default useForceUpdate;

忽略状态值

这里的逗号(,)表示我们只解构出数组的第二个元素 setTick,而忽略第一个元素。

因为我们只需要 state 发生变化,不需要使用该 state,直接写为空也行。

const [, setTick] = useState(0);

组件使用

组件使用就比较简单了,直接引入 useForceUpdate,并在需要调用的时机执行即可,为了证明是否刷新,我们打印了一条语句并执行了随机时间显示到页面上,我们来看一下效果。

import React from "react"; 
import useForceUpdate from "./useForceUpdate";const MyComponent = () => { 
const forceUpdate = useForceUpdate(); 
// 获取 forceUpdate 函数 
const handleClick = () => { 
forceUpdate(); 
// 调用 forceUpdate 函数触发重新渲染 
}; 
console.log('组件刷新!'); // 每次重新渲染时打印日志 
return 
( 
<div>
<p>当前时间: {Date.now()}</p> 
<button onClick={handleClick}>强制刷新</button> 
</div> 
); 
}; 
export default MyComponent;

总结一下

为什么 MyComponent 会刷新​​​​​​?

当我们在 MyComponent 中使用 useForceUpdate hook 时,useForceUpdate 内部的状态 tick 会成为 MyComponent组件 的一部分。

调用 forceUpdate 函数会更新 tick 状态,触发 MyComponent 的重新渲染。

这是因为 react 的状态更新机制会导致使用该状态的组件重新渲染,即使这个状态在组件中没有直接使用。

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

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

相关文章

无人机行业招投标技术详解

一、招标流程与原则 无人机行业的招投标流程通常包括招标公告发布、招标文件购买与审查、投标单位资格预审、投标书编制与递交、开标评标、中标公示与合同签订等步骤。在此过程中&#xff0c;必须遵循公开、公平、公正的原则&#xff0c;确保所有符合要求的投标单位都能获得平…

【从C++到Java一周速成】章节11:异常的处理

章节12&#xff1a;异常的处理 【1】try-catch-finally【2】throw和throwsthrow用法 异常就是在程序的运行过程中所发生的不正常的事件&#xff0c;它会中断正在运行的程序。 常见异常&#xff0c;例如&#xff1a; 所需文件找不到 网络连接不通或中断 算术运算错&#xff08;除…

前端实现打印功能

1、引入打印相关的库 在您的Vue项目中,需要先安装一个用于打印的库,如print-js。您可以通过以下命令安装&#xff1a; npm install print-js --save2、在组件中引入并使用&#xff0c;在需要实现打印功能的组件中&#xff0c;先import print-js模块&#xff1a; import print…

SpringBoot Bean

配置优先级 Bean的管理 从IOC容器中获取Bean对象&#xff1a;注入IOC容器对象 bean的作用域 Bean对象默认在容器启动时实例化 Lazy在第一次使用时初始化 Bean的管理&#xff1a;第三方Bean 引入依赖&#xff0c;每次解析创建新对象&#xff0c;浪费资源 将第三方对象交给…

如何搭建springBoot项目中的全局异常处理和自定义异常处理

目录 1 什么是异常 2 异常的种类 3 解决异常的方式 4 全局异常处理器和自定义异常处理器 5 测试异常处理 1 什么是异常 异常&#xff08;Exception&#xff09;是在程序执行过程中出现的一种特殊情况或错误。它可以是由于程序逻辑错误、运行环境问题、用户输入错误等原因…

【AI基础】反向传播

文章目录 1. 先写出第一步2.将其封装成函数3. pytorch版 1. 先写出第一步 # 定义输入值和期望输出 x_1 40.0 x_2 80.0 expected_output 60.0 初始化# 定义权重 w_1_11 0.5 w_1_12 0.5 w_1_13 0.5 w_1_21 0.5 w_1_22 0.5 w_1_23 0.5w_2_11 1.0 w_2_21 1.0 w_2_31 1…

基于 vLLM 搭建 DeepSeek-V2 Chat 服务

直奔主题。 安装vLLM 官方实现的代码还没有 merge 到 vLLM 主分支&#xff0c;所以直接 git clone DeepSeek 的分支。 git clone https://github.com/zwd003/vllm.git cd vllm pip install -e .源码安装大概耗时 10 分钟。 OpenAI 接口规范启动 官方 Github 放的是单条推理…

useState和setState的用法和区别

setState是类组件中用来更新状态的方法&#xff0c; 而useState是函数组件中用来声明并初始化状态的Hook。 在使用useState时&#xff0c;可以直接在函数组件中声明并初始化一个状态变量&#xff0c;也可以使用数组结构来获取状态变量和更新函数。 而在类组件中&#xff0c;需…

物流单管理系统软件教程

佳易王物流单打印软件&#xff0c;物流快运单据模板格式&#xff0c;佳易王物流管理

通过短信群发平台拓客引流营销的效果好不好?

通过短信群发平台进行营销拓客引流的效果可以是非常显著的&#xff0c;但具体效果会受到多种因素的影响&#xff0c;如目标受众的选择、短信内容的吸引力、发送时间和频率的合理性等。 以下是一些短信群发平台营销拓客引流的优势&#xff1a; 1.广泛覆盖&#xff1a;短…

噪声条件分数网络——NCSN原理解析

1、前言 本篇文章&#xff0c;我们讲NCSN&#xff0c;也就是噪声条件分数网络。这是宋飏老师在2019年提出的模型&#xff0c;思路与传统的生成模型大不相同&#xff0c;令人拍案叫绝&#xff01;&#xff01;&#xff01; 参考论文&#xff1a; ①Generative Modeling by Es…

cesium圆形扩散扫描效果封装

效果 封装类 优化了着色器代码&#xff1b;增加了边框大小调整参数&#xff0c;增加了清除效果方法 注&#xff1a;在页面销毁时需要调用清除方法 CircleDiffusion.clear()/*** circleDiffusion&#xff1a;圆扩散特效封装类**/// 圆扩散 class CircleDiffusion {viewer;last…

docker容器安装nexus3以及nexus3备份迁移仓库数据

一、安装步骤 1.搜索nexus3镜像 docker search nexus3 2.拉取镜像 docker pull sonatype/nexus3或者指定版本 docker pull sonatype/nexus3:3.68.0 3.查看拉取的镜像 docker images | grep "nexus3" 4.启动nexus服务 直接启动 docker run -d --name nexus3 -…

怎么查看公网IP?

在网络通信中&#xff0c;每个设备都会被分配一个IP地址&#xff0c;用于在互联网上进行唯一标识和通信。公网IP是指可以被公开访问的IP地址&#xff0c;可以用来建立远程连接或者进行网络访问等操作。怎么查看公网IP呢&#xff1f;下面将介绍几种常用的方法。 使用命令行查询公…

LabVIEW高温往复摩擦测试系统中PID控制

在LabVIEW开发高温往复摩擦测试系统中实现PID控制&#xff0c;需要注意以下几个方面&#xff1a; 1. 系统建模与参数确定 物理模型建立: 首先&#xff0c;需要了解被控对象的物理特性&#xff0c;包括热惯性、摩擦系数等。这些特性决定了系统的响应速度和稳定性。实验数据获取…

吉时利Keithley 2010数字万用表7.5 位

Keithley 2010数字万用表&#xff0c;7.5 位 吉时利 2010 数字万用表、7.5 位、低噪声万用表将高分辨率与生产应用所需的高速度和高准确度相结合&#xff0c;例如测试精密传感器、换能器、A/D 和 D/A 转换器、调节器、参考、连接器、开关和继电器。2010 基于与吉时利 2000、20…

人工智能应用-实验6-卷积神经网络分类minst手写数据集

文章目录 &#x1f9e1;&#x1f9e1;实验内容&#x1f9e1;&#x1f9e1;&#x1f9e1;&#x1f9e1;代码&#x1f9e1;&#x1f9e1;&#x1f9e1;&#x1f9e1;分析结果&#x1f9e1;&#x1f9e1;&#x1f9e1;&#x1f9e1;实验总结&#x1f9e1;&#x1f9e1; &#x1f9…

521源码-在线客服-CRMChat网页版客服系统 UNIAPP 全方位在线客服系统源码与管理体系平台

CRMChat客服系统&#xff1a;基于Swoole4Tp6RedisVueMysql构建的高效沟通桥梁 CRMChat是一款独立且高性能的在线客服系统&#xff0c;它结合了Swoole4、Tp6、Redis、Vue以及Mysql等先进技术栈&#xff0c;为用户提供了卓越的在线沟通体验。该系统不仅支持在Pc端、移动端、小程…

列表页9大样式,保准你看了就能掌握。

上文&#xff1a;一张图集齐B端列表页的16大组件&#xff0c;召唤神龙&#xff0c;看后恍然大悟。 普通列表/基础列表/常规列表 不适合移动端展示 复杂列表 加入了统计 适合移动端 项目列表 适合移动端 应用列表 适合移动端 多级列表 复杂的多级结构&#xff0c;下图展示了…

美国教育数据分析

文章目录 第1关&#xff1a;认识数据第2关&#xff1a;数据预处理第3关&#xff1a;数学成绩预测 第1关&#xff1a;认识数据 编程要求 根据提示&#xff0c;在右侧Begin-End区域补充代码&#xff0c;查看数据属性名称。 测试说明 程序会调用你实现的方法&#xff0c;查看数据…