React表格单元格内嵌Radio按钮时如何避免全页重渲染？

嘿，我来帮你搞定这个页面闪烁的问题！你遇到的核心问题确实是父组件每次setState都会触发所有子组件重渲染，毕竟你的所有Radio和TableRow都直接依赖父组件的item_ratings状态。下面给你一步步的优化方案，顺便聊聊Redux的作用：

一、核心优化：拆分组件+React.memo 减少重渲染范围 #

最直接有效的方法是把每一行的单选组拆成独立的子组件，这样只有被点击的那一行会重渲染，其他行完全不受影响。

1. 创建独立的RatingRow子组件 #

把原来TableRow里的逻辑抽出来，做成一个单独的组件，只接收自己需要的props：

import React from 'react';
import { TableRow, TableCell, Radio } from '@mui/material';
import uuidv1 from 'uuid/v1';

// 用React.memo包裹，只有props变化时才重渲染
const RatingRow = React.memo(({ item, rowIndex, currentRating, onRatingChange, classes }) => {
  return (
    <TableRow>
      <TableCell>{item.content}</TableCell>
      {item.possible.map(rating => (
        <TableCell key={uuidv1()} className={[classes.cell, classes.cell_center]}>
          <Radio
            checked={currentRating === rating}
            onChange={(e) => onRatingChange(e, rowIndex)}
            key={`radio-${uuidv1()}`}
            value={rating}
            name={`radio-group-${rowIndex}`} // 给每行单独的name，符合HTML单选组逻辑
            aria-label={rating}
          />
        </TableCell>
      ))}
    </TableRow>
  );
});

export default RatingRow;

2. 修改父组件的TableBody渲染逻辑 #

现在父组件只需要循环渲染这个子组件即可，把对应的数据和回调传进去：

import RatingRow from './RatingRow';

// ...父组件代码
<TableBody>
  {SIM_INSTRUCTOR_ITEMS.map((el) => 
    el.list.map((item, index) => {
      const rowCount = itemRows++;
      return (
        <RatingRow
          key={rowCount} // 给子组件稳定的key，不要用uuid（每次渲染都变会导致组件重建）
          item={item}
          rowIndex={rowCount}
          currentRating={this.state.item_ratings[rowCount].ratingPoint}
          onRatingChange={this.handleRadioChange}
          classes={classes}
        />
      );
    })
  )}
</TableBody>

3. 优化state更新的Immutable写法 #

你原来的handleRadioChange直接修改了原state数组，这不符合React的Immutable原则，可能导致一些不可预料的问题。改成创建新数组的方式：

handleRadioChange = (event, rowIndex) => {
  // 不要直接修改原state，创建新数组
  this.setState(prevState => ({
    item_ratings: prevState.item_ratings.map((item, idx) => 
      idx === rowIndex 
        ? { ...item, ratingPoint: event.target.value } 
        : item
    )
  }));
};

二、关于Redux的疑问：它不是解决重渲染的银弹 #

Redux本身并不能直接解决你的重渲染问题——哪怕把状态放到Redux里，如果组件拆分和优化不到位，依然会触发全页重渲染。

如果你的item_ratings只是这个表格的局部状态，完全没必要用Redux，上面的组件拆分方案已经足够高效。如果确实需要把状态提升到全局，那使用Redux时也要配合：

• useSelector的shallowEqual选项（函数组件），或者connect的mapStateToProps里做精准的状态映射（类组件）
• 同样用React.memo来包裹子组件，避免不必要的重渲染

为什么传统HTML的name方式在React里不够用？ #

传统HTML里相同name的单选按钮会自动互斥，但React的受控组件模式要求我们通过state来管理选中状态——这虽然增加了一点复杂度，但能让状态更可控。不过通过组件拆分，我们可以在保持受控模式的同时，把重渲染的范围缩小到最小。

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