记录学习react的一些内容

ops/2024/11/14 0:17:23/

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

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.ppmy.cn/ops/133416.html

相关文章

display:inline-block元素之间为什么会出现间隙

问题的核心是 HTML 文件中的换行符、空格和制表符 在浏览器渲染时会被解释为 空白字符&#xff0c;并影响 行内元素&#xff08;如 inline、inline-block&#xff09;之间的间距。 详细解释&#xff1a; 在 HTML 中&#xff0c;元素之间的 换行符 或 空格 会被浏览器当作 空白…

【k8s】ClusterIP能http访问,但是不能ping 的原因

ClusterIP 服务在 Kubernetes 中是可以访问的&#xff0c;但通常无法通过 ping 命令来测试连通性。这主要是因为 ClusterIP 是一个虚拟 IP 地址&#xff0c;而不是实际分配给某个网络接口的 IP 地址。以下是一些原因和解释&#xff1a; 1. 虚拟 IP 地址 ClusterIP 是一个虚拟…

VBA高级应用30例应用3在Excel中的ListObject对象:插入行和列

《VBA高级应用30例》&#xff08;版权10178985&#xff09;&#xff0c;是我推出的第十套教程&#xff0c;教程是专门针对高级学员在学习VBA过程中提高路途上的案例展开&#xff0c;这套教程案例与理论结合&#xff0c;紧贴“实战”&#xff0c;并做“战术总结”&#xff0c;以…

每日一题——第一百二十四题

题目&#xff1a;进制转换 #pragma once#include<stdio.h> #include<ctype.h> #include<string.h>/// <summary> /// //将字符串表示的任意进制数转为十进制 /// </summary> /// <param name"str">字符串</param> /// &l…

【游戏引擎之路】登神长阶(十三)——Vulkan教程:讲个笑话:离开舒适区

【游戏引擎之路】登神长阶&#xff08;十三&#xff09;——Vulkan教程&#xff1a;讲个笑话&#xff1a;离开舒适区 2024年 5月20日-6月4日&#xff1a;攻克2D物理引擎。 2024年 6月4日-6月13日&#xff1a;攻克《3D数学基础》。 2024年 6月13日-6月20日&#xff1a;攻克《3D…

Redis相关技术内容

1. Redis整体的技术全景 应用场景&#xff1a;数据结构的应用、缓存应用、集群应用 底层原理&#xff1a;线程模型、主从复制、负载均衡 ​ 数据结构、哨兵机制、数据分片 ​ AOF、 RDB 2. 并发承载 redis&#xff08;官方 10w/s&#xff09;数据库->mysql 并发范围&…

AI大模型开发架构设计(18)——基于大模型构建企业知识库案例实战

文章目录 1 LLM 大模型在工作中的实际应用以及局限性LLM 大模型工作中实际应用大模型2点局限性 2 基于大模型和向量数据库的企业级知识库架构剖析向量数据库向量数据库选型知识库文档检索增强(Retrieval Augmented Generation)向量数据库应用技术总体架构向量数据库应用离线索引…

Python的装饰器

一、概念 在Python中&#xff0c;装饰器本质是一个特殊的嵌套函数&#xff0c;它接收一个函数&#xff08;被装饰的函数&#xff09;做参数&#xff0c;并返回一个新的函数&#xff08;装饰后的函数&#xff09; 装饰器最大的作用&#xff1a;在不改变原有的函数&#xff08;…