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

记录学习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.mrgr.cn/news/70348.html

相关文章:

  • springcloud alibaba之shcedulerx实现分布式锁
  • 手机发展史介绍
  • MySQL基础大全(看这一篇足够!!!)
  • 如果在docker 容器中安装ros遇到的问题
  • windows 中docker desktop 安装
  • 如何通过OpenSSL来创建自签名的CA证书?
  • 华为ISC供应链服务运营:流程、组织、治理与绩效管理的综合框架
  • find 命令是 Linux 系统中用于在文件系统中查找文件和目录的强大工具
  • 智能量化交易的核心应用与中阳发展前景
  • RTSP播放器EasyPlayer.js无插件直播流媒体音视频播放器使用http与https的区别
  • 【SpringBoot】——Spring Validation之用户注册、JWT令牌之用户登入
  • Debezium日常分享系列之:debezium3模块
  • ubuntu 22.04 server 安装 mysql 5.7.40 LTS
  • 优化时钟网络之时钟抖动
  • java -jar`命令详解:运行JAR文件、传递参数与性能调优
  • OPC学习笔记
  • FPGA学习笔记#3 Vitis HLS编程规范、数据类型、基本运算
  • 【神经科学学习笔记】基于分层嵌套谱分割(Nested Spectral Partition)模型分析大脑网络整合与分离的局部指标(二)
  • 【HCIP园区网综合拓扑实验】配置步骤与详解(已施工完毕)
  • 业务开发时,接口不能对外暴露怎么办?
  • C++初阶——类和对象(中)
  • 政策变化?软考考试39分就过线了?
  • C++(继承)
  • 如何清晰地描述一个磁体采购需求
  • 星海智算:风月ComfyUI_SD3.5
  • 深度学习笔记12