react hook useMemo组件渲染性能优化

 useMemo其实是根useEffie的效果是一样的，都是靠第二个参数来确定要不要重新渲染，官方的例子都是提及变量，其实useMemo还可以用到组件中，防止组件频发渲染。

import React, { useState } from 'react';
import { Row, Col, Button } from 'antd';

import RowList from '../components/RowList';

const IndexPage: React.FC = () => {
  const [dataList, setDataList] = useState<any>([]);
  return (
    <>
      {
        dataList.map((item: any, index: number) => (
          <RowList
            key={item.id}
            {...item}
            index={index}
            cId={currentId}
            selectCount={selectedCount}
            deleteCount={deleteCountRes}
          />
        )
      }
    </>
  );
}
export default IndexPage;

import React, { useMemo } from 'react';
import { Row, Col, Button } from 'antd';
interface PropsTypes {
  id: string;
  x: number;
  y: number;
  radius: number;
  index: number;
  cId: string;
  selectCount: (data:any) => void;
  deleteCount: (id:string, index: number) => void;
}
const RowList: React.FC<PropsTypes> = ({id, x, y, radius, index, cId, selectCount, deleteCount}) => {
  return useMemo(() => {
    return (
      <Row key={`${id}`}
          id={id}
          style={{backgroundColor: cId === id ? 'rgba(0, 0, 0, 0.2)' : 'transparent'}}
          onClick={() => selectCount(id)}>
      <Col span="7">X: {~~x}</Col>
      <Col span="7">Y: {~~y}</Col>
      <Col span="7">直径: {(~~radius * 2)}</Col>
      <Col span="3">
        <Button type="link" danger size="small" onClick={() => deleteCount(id, index)}>删除</Button>
      </Col>
    </Row>
    )
  }, [id, cId]);
};
export default RowList;