React+Redux+Redux-Persist性能问题：300问卷项dispatch延迟2秒

嘿，我仔细看了你的代码，马上就发现了几个核心问题——这些正是导致300个问题项切换时卡顿的根源，本质是不必要的组件重渲染过多，我们一步步来修复：

问题分析 #

1. 全局订阅冗余：你的mapStateToProps把整个state.answers传给了每个FormItem，这意味着只要任何一个答案改变，所有300个组件都会触发重渲染，完全没必要。
2. 内部状态冗余：组件自己维护了answer状态，但这个值已经存在于Redux的answers中，既造成状态不同步风险，还额外触发了setState后的重渲染。
3. DOM属性错误：RadioGroup的name属性写成了this.props.answers.nr，明显是笔误，会导致所有单选框的name冲突，引发选中状态异常。

修复后的完整代码 #

import React from 'react';
import { setAnswer } from "../actions";
import { connect } from 'react-redux'
import { Container, Row, Col } from 'react-bootstrap'
import { Radio, RadioGroup, FormControlLabel } from '@material-ui/core'

// 用React.memo包装，仅当props变化时才重渲染
const FormItem = React.memo((props) => {
  const handleChange = (event) => {
    const target = event.target;
    props.setAnswer(props.item.nr, target.value)
  }

  // 直接从props获取当前问题的答案，摒弃内部state
  const currentAnswer = props.currentAnswer || 0;

  return (
    <Row className={"item-row" + (currentAnswer != 0 ? " answered" : "")}>
      <Col md={"5"}><div>{props.item.text}</div></Col>
      <Col md={"7"}>
        {/* 修正name属性，确保每个RadioGroup唯一 */}
        <RadioGroup name={"item" + props.item.nr} value={currentAnswer} onChange={handleChange}>
          <Row>
            <Col className={"text-center"}><FormControlLabel value="1" control={<Radio color="primary" />} /></Col>
            <Col className={"text-center"}><FormControlLabel value="2" control={<Radio color="primary" />} /></Col>
            <Col className={"text-center"}><FormControlLabel value="3" control={<Radio color="primary" />} /></Col>
            <Col className={"text-center"}><FormControlLabel value="4" control={<Radio color="primary" />} /></Col>
            <Col className={"text-center"}><FormControlLabel value="5" control={<Radio color="primary" />} /></Col>
          </Row>
        </RadioGroup>
      </Col>
    </Row>
  );
})

// 优化mapStateToProps，仅订阅当前组件对应的单个答案
const mapStateToProps = (state, ownProps) => {
  return {
    currentAnswer: state.answers[ownProps.item.nr]
  }
}

// 简化mapDispatchToProps写法
const mapDispatchToProps = { setAnswer }

export default connect(mapStateToProps, mapDispatchToProps)(FormItem);

额外性能优化建议 #

• 虚拟滚动：如果300个组件仍有压力，可使用react-window等虚拟滚动库，只渲染当前视口内的问题项，大幅减少DOM元素数量。
• 检查Reducer不可变性：确保setAnswer的reducer是返回新对象而非修改原对象，比如：

  // 正确的不可变更新写法
  case SET_ANSWER:
    return {
      ...state,
      [action.payload.nr]: action.payload.value
    }
  

  错误的可变更新会导致Redux无法正确检测状态变化，引发异常重渲染。
• 批量更新：若后续有批量修改场景，可使用Redux的batch API（Redux Toolkit会自动批量），减少多次dispatch导致的重渲染次数。

修改后，每次切换单选框时只有当前的FormItem会重渲染，其余299个组件都不会触发更新，性能会立刻恢复正常。

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