记录学习react的一些内容_react any[]-优快云博客

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

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

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

2.useEffect(()=>{},[]) 类似vue中的onMounted 但是其内部不能进行异步操作

  // 监听 homeConfigs 的变化，当其更新时调用 getUserInfo
  useEffect(() => {
    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的展开参数

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