圣诞节的工作总结

dataList.map((item, index) => {}) 和 dataList.map((item, index) => ()) 的区别在于函数体的写法。

dataList.map((item, index) => {}) 使用了花括号 {} 表示函数体，这意味着你可以在函数体内写多行代码，并且需要使用 return 关键字来返回结果。

const renderRisk = dataList.map((item, index) => {
  // 多行代码
  return something;
});


dataList.map((item, index) => ()) 使用了小括号 () 表示函数体，这适用于只有一行代码的情况，并且它会自动将这一行代码的结果作为返回值。

const renderRisk = dataList.map((item, index) => something);

() 作为缩写还是区分下。

在你的具体代码中，由于 renderRisk 函数的主体是 JSX，通常使用花括号 {} 包裹 JSX 代码，因为 JSX 通常是多行的。所以在你的情况下，使用花括号是更合适的方式。

const renderRisk = dataList.map((item, index) => {
  // 多行 JSX 代码
  return (
    <div key={index}>
      {/* ... */}
    </div>
  );
});


需要 return 的时候 是用 {} 的

大概是这样

react hooks 这俩个数组居然是关联的

  const [tokenList, settokenList] = useState<ItokenItem[]>([]); // 保留元数组的值做切割数据使用
  const [loading, setLoading] = useState(true);

  const pageSize = 20; // 数据分页限制
  const onChange: PaginationProps['onChange'] = page => {
    const resData = getPage(page, tokenList); // 切页
    setList(resData); // 渲染数据
    setCurrent(page);
  };
这个关联联动很好用，因为 list  的分属性改变 会同步更新到  tokenList  
里面，这样 就省了不少事儿。

比如正面挂一个 props 使用 useEffect 监听也许是可行的，

在 React Hooks 中，你可以使用 useEffect Hook 来实现通过 props 暴露命令式行为。具体步骤如下：

创建一个自定义的命令式行为函数，例如 handleAction。
在组件中使用 useEffect Hook 监听某个特定的 props 变化。
在 useEffect 回调函数中，根据 props 的变化来调用命令式行为函数。
以下是一个示例代码：

import React, { useEffect } from 'react';

function MyComponent(props) {
  // 创建命令式行为函数
  const handleAction = () => {
    // 执行你的命令式行为逻辑
    console.log('执行命令式行为');
  }

  // 使用 useEffect 监听特定的 props 变化
  useEffect(() => {
    // 在 useEffect 回调函数中调用命令式行为函数
    handleAction();
  }, [props.someProp]); // 在这里指定需要监听的 props

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

在上面的示例中，当 props.someProp 发生变化时，useEffect 的回调函数会被触发，进而调用 handleAction 函数来执行命令式行为。你可以根据实际需求来调整代码逻辑。

ref 触发要抓子元素的节点否则不要乱用，确实难用。
官方文档 建议我们 不是在特别 需要抓子组件的里面 ref 的时候
尽量 不要 forwardRef  ，使用 useEffect 做监听触发子组件操作就行。
本次开发 用到了很多 子组件函数 反向回到父组件触发 父组件统计 子组件函数回调状态的更新。父组件 直接 prop 通知 子组件进行二次变更的操作要少一些。