记录学习react的一些内容

由于是在公司实际项目中学习,所以不是很完整 需要一点一点的学

1.React.useState 类似于vue中的ref 可以修改状态 但是是异步的 感觉不好用 

const [wishData, setWishData] = React.useState<any>(null); 只能使用setxxx来修改

2.useEffect(()=>{},[]) 类似vue中的onMounted 但是其内部不能进行异步操作
  // 监听 homeConfigs 的变化,当其更新时调用 getUserInfouseEffect(() => {setLoading(true);if (homeConfigs && homeConfigs.length > 0) {console.log(homeConfigs, 'homeConfigs');getUserInfo();}}, [homeConfigs]); // 依赖项为 homeConfigs
/**
*如果是[]就是一开始执行 这样看来也像watch的
*/
3.React.useMemo(()=>{},[xxx])仅当其中一个依赖项发生变化时才会重新计算记忆值 vue--watch
4.  const claimedData = React.useRef<any>([]); 这个会有一个.current 是响应式的

5.useMemo 是 React 中的一个 Hook,用于在组件渲染过程中缓存计算结果,从而避免重复计算、提高性能
        useMemo 会根据依赖数组中的值(通常是某些 props 或 state)来决定是否重新计算值,只有依赖发生变化时才会重新计算,否则返回上次缓存的结果

遇到的一些问题的解决

1.使用ant的react版本,table的展开问题

        问题:初始情况下,需要不展开子项,当通过搜索时,需要自动展开搜索后的列表项;

        有坑:

1、defaultExpandAllRows 初始时,是否展开所有行 这个不行因为这个是在初始时,那个时候内容为null  解决:使用key来每次更新key时重新渲染table 但是我这个使用了导致初始值丢失 所以没有使用

2、使用expandedRowKeys(展开的行,控制属性)+ onExpandedRowsChange(展开的行变化时触发) 这个我一开始不知道怎么设置他的expandedRowKeys ,后面我直接使用onExpandedRowsChange返回的参数查看内容是什么 对应的是我的数据id(如果不行就可以动态添加一个key),所以我就采取了这个方法,去写一个expandedRowKeys数组 在请求后去修改这个数组 并在onExpandedRowsChange使用参数来维护该数组

代码如下


const [expandedRowKeys, setExpandedRowKeys] = React.useState([]);expandable: (currentTabs === WishStatus.Claimed ||currentTabs === WishStatus.Completed) && {expandedRowKeys,onExpandedRowsChange: (expandedRows) => {console.log(expandedRows, 'expandedRows ---------- 开始咯');// 如果expandedRowKeys中有expandedRows就移除 没有就添加// 这里不用考虑 expandedRows 就是应该为展开的id数组 setExpandedRowKeys(expandedRows as any);},
},// 存在搜索内容 并且是已认领或已完成
if (params?.keyword && [WishStatus.Claimed, WishStatus.Completed].includes(currentTabs)) {setExpandedRowKeys(res.list.map((item) => `${item.id}pid`));
} else {setExpandedRowKeys([]);
}
//table的展开参数

目前也只是用到这些 等后续有更多的再来记录 

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

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

相关文章

《DiffusionDet: Diffusion Model for Object Detection》ICCV2023

摘要 本文提出了一种新的框架DiffusionDet&#xff0c;它将目标检测任务表述为从带噪声的边界框到目标边界框的去噪扩散过程&#xff08;如图一所示&#xff09;。在训练阶段&#xff0c;目标边界框逐渐扩散到随机分布&#xff0c;模型学习逆转这一加噪过程。在推理阶段&#…

词嵌入方法(Word Embedding)

词嵌入方法&#xff08;Word Embedding&#xff09; Word Embedding是NLP中的一种技术&#xff0c;通过将单词映射到一个空间向量来表示每个单词 ✨️常见的词嵌入方法&#xff1a; &#x1f31f;Word2Vec&#xff1a;由谷歌提出的方法&#xff0c;分为CBOW&#xff08;conti…

Mit6.S081-实验环境搭建

Mit6.S081-实验环境搭建 注&#xff1a;大家每次做一些操作的时候觉得不太保险就先把虚拟机克隆一份 前言 qemu&#xff08;quick emulator&#xff09;&#xff1a;这是一个模拟硬件环境的软件&#xff0c;利用它可以运行我们编译好的操作系统。 准备一个Linux系统&#xf…

qt QVideoWidget详解

1. 概述 QVideoWidget是Qt框架中用于视频播放的控件。它继承自QWidget&#xff0c;并提供了与QMediaPlayer等多媒体播放类集成的功能。QVideoWidget可以嵌入到Qt应用程序的用户界面中&#xff0c;用于显示视频内容。它支持多种视频格式&#xff0c;并提供了基本的视频播放控制…

10款PDF合并工具的使用体验与推荐!!!

在如今的信息洪流中&#xff0c;我们几乎每个人都被淹没在大量的数字文档之中。无论是学生、教师还是职场人士&#xff0c;我们都需要高效地管理和处理这些文档。而PDF文件&#xff0c;凭借其跨平台的稳定性和通用性&#xff0c;成了最常用的文档格式之一。我们经常需要处理、编…

【AI大模型】ELMo模型介绍:深度理解语言模型的嵌入艺术

学习目标 了解什么是ELMo.掌握ELMo的架构.掌握ELMo的预训练任务.了解ELMo的效果和成绩.了解ELMo的优缺点. 目录 &#x1f354; ELMo简介 &#x1f354; ELMo的架构 2.1 总体架构 2.2 Embedding模块 2.3 两部分的双层LSTM模块 2.4 词向量表征模块 &#x1f354; ELMo的预…

Gurobi学术版+Anaconda安装步骤

注意&#xff1a;在anaconda虚拟环境中安装gurobi库是不需要在本地下载gurobi这个软件的&#xff0c;只需要conda install gurobi即可&#xff0c;或者指定版本的安装conda install -c gurobi gurobi11.0.3。 step0&#xff1a;安装ananconda step1&#xff1a;获得学术许可&a…

【C++】类与对象的基础概念

目录&#xff1a; 一、inline 二、类与对象基础 &#xff08;一&#xff09;类的定义 &#xff08;二&#xff09;访问限定符 &#xff08;三&#xff09;类域 &#xff08;四&#xff09;实例化概念 正文 一、inline 在C语言的学习过程中&#xff0c;大家肯定了解过宏这个概…

解决表格出现滚动条样式错乱问题

自定义表格出现滚动条时&#xff0c;会因为宽度不对等导致样式错乱&#xff1b; 解决思路&#xff1a; 监听表格数据的变化&#xff0c;当表格出现滚动条时&#xff0c;再调用更新宽度的方法updateWidth&#xff0c;去改变表格头部的宽度&#xff0c;最终保持表格头部和内容对…

天才的懈怠 : 平衡二叉树

力扣110&#xff1a;平衡二叉树 描述&#xff1a; 二叉树的每一个节点的左右子树高度差不超过1&#xff0c;即为平衡二叉树 递归 树&#xff1a;还是用递归&#xff0c;从最深的节点开始向上判断&#xff0c;保证每个节点的左右子树高度差不大于1&#xff0c;大于1的用 -1 做标…

使用@react-three/fiber,@mkkellogg/gaussian-splats-3d加载.splat,.ply,.ksplat文件

前言 假设您正在现有项目中集成这些包&#xff0c;而该项目的构建工具为 Webpack 或 Vite。同时&#xff0c;您对 Three.js 和 React 有一定的了解。如果您发现有任何错误或有更好的方法&#xff0c;请随时留言。 安装 npm install three types/three react-three/fiber rea…

MySQL:CRUD

MySQL表的增删改查&#xff08;操作的是表中的记录&#xff09; CRUD(增删改查) C-Create新增R-Retrieve检查&#xff0c;查询U-Update更新D-Delete删除 新增&#xff08;Create&#xff09; 语法&#xff1a; 单行数据全列插入 insert into 表名[字段一&#xff0c;字段…

DeBiFormer实战:使用DeBiFormer实现图像分类任务(二)

文章目录 训练部分导入项目使用的库设置随机因子设置全局参数图像预处理与增强读取数据设置Loss设置模型设置优化器和学习率调整策略设置混合精度&#xff0c;DP多卡&#xff0c;EMA定义训练和验证函数训练函数验证函数调用训练和验证方法 运行以及结果查看测试完整的代码 在上…

小面馆叫号取餐流程 佳易王面馆米线店点餐叫号管理系统操作教程

一、概述 【软件资源文件下载在文章最后】 小面馆叫号取餐流程 佳易王面馆米线店点餐叫号管理系统操作教程 点餐软件以其实用的功能和简便的操作&#xff0c;为小型餐饮店提供了高效的点餐管理解决方案&#xff0c;提高了工作效率和服务质量 ‌点餐管理‌&#xff1a;支持电…

5G时代的关键元件:射频微波MLCCs市场前景广阔

根据QYResearch调研团队最新发布的《全球射频微波多层陶瓷电容器市场报告2023-2029》显示&#xff0c;预计到2029年&#xff0c;全球射频微波多层陶瓷电容器市场规模将攀升至12.4亿美元&#xff0c;其未来几年内的年复合增长率&#xff08;CAGR&#xff09;预计为5.1%。 以下图…

ElasticSearch学习笔记一:简单使用

一、前言 该系列的文章用于记录本人从0学习ES的过程&#xff0c;首先会对基本的使用进行讲解。本文默认已经安装了ES单机版本&#xff08;当然后续也会有对应的笔记&#xff09;&#xff0c;且对ES已经有了相对的了解&#xff0c;闲话少叙&#xff0c;书开正文。 二、ES简介 …

FFmpeg 4.3 音视频-多路H265监控录放C++开发十三:将AVFrame转换成AVPacket。视频编码原理.编码相关api

前提&#xff1a; 从前面的学习我们知道 AVFrame中是最原始的 视频数据&#xff0c;这一节开始我们需要将这个最原始的视频数据 压缩成 AVPacket数据&#xff0c; 我们前面&#xff0c;将YUV数据或者 RGBA 数据装进入了 AVFrame里面&#xff0c;并且在SDL中显示。 也就是说&…

ODOO学习笔记(8):模块化架构的优势

灵活性与可定制性 业务流程适配&#xff1a;企业的业务流程往往因行业、规模和管理方式等因素而各不相同。Odoo的模块化架构允许企业根据自身的具体业务流程&#xff0c;选择和组合不同的模块。例如&#xff0c;一家制造企业可以启用采购、库存、生产和销售模块&#xff0c;并通…

28.医院管理系统(基于springboot和vue)

目录 1.系统的受众说明 2. 相关技术和开发环境 2.1 相关技术 2.1.1 Java语言 2.1.2 HTML、CSS、JavaScript 2.1.3 Redis 2.1.4 MySQL 2.1.5 SSM框架 2.1.6 Vue.js 2.1.7 SpringBoot 2.2 开发环境 3. 系统分析 3.1 可行性分析 3.1.1 经济可行性 3.1.2 技术…

实时渲染技术如何助力3D虚拟展厅?

实时渲染技术以其强大的图形处理能力和即时反馈特性&#xff0c;在虚拟展厅的创建和体验中发挥着举足轻重的作用。视创云展3D虚拟展厅提供全方位的VR漫游体验&#xff0c;实时渲染技术确保场景细腻逼真&#xff0c;让访客仿佛置身其中&#xff0c;享受沉浸式的视听享受。以下是…