React中使用Material UI Table时，鼠标悬停表格行触发子组件重渲染问题

我之前在项目里也碰到过一模一样的情况——鼠标一放到Table行上，子组件就跟着反复重渲染，既影响性能又完全没必要。咱们先拆解清楚原因，再一步步解决：

常见原因分析 #

• hover状态通过state触发更新：如果你的TableRow悬停效果是用组件state来控制的（比如把isHovered作为props传给行组件），那每次鼠标进出都会更新state，导致父组件重渲染，进而带动子组件一起重渲染。
• 内联函数/对象作为子组件props：要是你在render里直接写onClick={() => doSomething(item.id)}或者传递{ key: item.id }这种内联对象，每次父组件渲染时这些都会生成新的引用，子组件会认为props变了，从而触发重渲染。
• 子组件未做纯组件优化：如果子组件没有用React.memo包裹，哪怕它的props完全没变化，只要父组件重渲染，它就会跟着重新渲染一遍。

具体解决方案 #

1. 用CSS伪类替代state控制hover样式 #

Material UI的TableRow本身支持通过CSS:hover伪类实现悬停效果，完全不需要用state管理。这样能避免因为state更新导致的组件重渲染：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  tableRow: {
    '&:hover': {
      backgroundColor: '#f0f0f0', // 自定义悬停背景色
    },
  },
});

const MyTableRow = ({ item }) => {
  const classes = useStyles();
  return (
    <TableRow className={classes.tableRow}>
      <MyChildComponent data={item.data} />
    </TableRow>
  );
};

2. 用React.memo包裹纯子组件 #

如果子组件是纯组件（只依赖传入的props，没有内部state或副作用），用React.memo包裹它，React会浅比较props的变化，只有当props真的改变时才会重渲染：

import React from 'react';
import { TableCell } from '@material-ui/core';

// 包裹后，只有data或onClick变化时才会重渲染
const MyChildComponent = React.memo(({ data, onClick }) => {
  console.log('子组件渲染了'); // 测试用，优化后hover时不会打印
  return <TableCell onClick={onClick}>{data}</TableCell>;
});

3. 稳定props引用：用useCallback和useMemo #

如果必须给子组件传递函数或对象，一定要用useCallback（稳定函数引用）和useMemo（稳定对象引用）来缓存它们，避免每次渲染生成新的引用：

import React, { useCallback } from 'react';

const TableRowItem = ({ item }) => {
  // 用useCallback缓存函数，只有item.id变化时才会生成新函数
  const handleItemClick = useCallback(() => {
    console.log('点击了', item.id);
  }, [item.id]);

  return (
    <TableRow hover>
      <MyChildComponent data={item.data} onClick={handleItemClick} />
    </TableRow>
  );
};

如果要传递对象：

const cellProps = useMemo(() => ({
  id: item.id,
  value: item.value,
}), [item.id, item.value]);

// 传给子组件
<MyChildComponent props={cellProps} />

4. 拆分组件，隔离变化部分 #

如果行组件里有部分内容不会因为hover变化，可以把这部分拆成独立的子组件并包裹React.memo，这样hover时只有变化的部分会重渲染，不变的部分保持稳定。

总结 #

核心思路就是：减少不必要的state更新+稳定props引用+优化子组件的渲染条件。按照上面的方法调整后，hover时子组件就不会无缘无故重渲染了。

内容的提问来源于stack exchange，提问作者anshu kumari