React+Redux待办列表子组件不重新渲染问题求助

安全阿岳

2026-5-14

嘿，我来帮你拆解这个问题的核心原因，以及给出几种靠谱的解决方案～

问题根源：浅比较没检测到props变化

你遇到的问题其实和React-Redux的connect组件默认行为，以及Redux状态更新的不可变性原则紧密相关：

Redux状态更新的疏漏：如果你的reducer在处理checkTodo action时，没有返回全新的todo对象，而是直接修改了原数组里的todo属性（比如todo.completed = !todo.completed），那么虽然todo的属性变了，但这个todo对象的引用还是原来的。
connect的浅比较逻辑：React-Redux的connect组件默认用浅比较判断是否需要重渲染。当子组件TodoItem的props.todo引用没变化时，哪怕它的属性变了，浅比较也会认为props没更新，从而跳过重渲染。这就是为什么你能在onChange里打印出更新后的completed值（对象引用没变，属性确实被修改了），但render方法却没触发。

另外，当你给子组件加了mapStateToProps返回整个state时，connect会检测到state的引用变化（reducer返回了新的state对象），所以会触发重渲染——但这只是个临时 workaround，不是正确的解决思路。

正确的解决方案

1. 严格遵循Redux不可变性原则（最推荐）

在reducer中处理checkTodo时，永远返回新的对象/数组，绝不直接修改原数据。这样父组件传递给子组件的todo会是全新的引用，connect的浅比较就能检测到props变化，触发子组件重渲染。

示例reducer代码：

// 正确写法：返回新数组+新todo对象
const todosReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'CHECK_TODO':
      return {
        ...state,
        todos: state.todos.map(todo => {
          if (todo.id === action.payload) {
            // 用扩展运算符创建新todo对象，修改completed属性
            return { ...todo, completed: !todo.completed };
          }
          return todo; // 未修改的todo直接返回
        })
      };
    // 其他case逻辑...
    default:
      return state;
  }
};

这种写法完全符合Redux的设计要求，不仅能解决子组件不渲染的问题，还能避免Redux状态更新的其他潜在问题（比如时间旅行调试失效）。

2. 让子组件的connect监听对应todo的状态

如果你暂时无法修改reducer的写法，可以让TodoItem的mapStateToProps根据自身的todo id，从state中获取最新的todo对象。这样当state变化时，connect会检测到返回的todo对象变化，触发重渲染：

修改TodoItem.js的connect部分：

const mapStateToProps = (state, ownProps) => ({
  // 根据父组件传递的todo.id，从state中获取最新的todo
  todo: state.todosReducer.todos.find(t => t.id === ownProps.todo.id)
});

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

注意：这种方法每个子组件都会执行一次find操作，当todo数量较多时可能有性能影响，所以还是优先推荐第一种方法。

3. 自定义connect的比较逻辑

你可以给connect传递第四个参数，自定义比较规则，让它忽略引用，直接比较todo的核心属性：

import { connect } from 'react-redux';

// 自定义父组件props的比较逻辑
const areOwnPropsEqual = (prevProps, nextProps) => {
  const prevTodo = prevProps.todo;
  const nextTodo = nextProps.todo;
  // 比较todo的核心属性是否一致
  return prevTodo.id === nextTodo.id &&
         prevTodo.completed === nextTodo.completed &&
         prevTodo.title === nextTodo.title;
};

export default connect(
  null,
  mapDispatchToProps,
  null,
  { areOwnPropsEqual } // 传入自定义比较逻辑
)(TodoItem);

这种方法适合无法修改reducer的场景，但要注意如果todo的属性很多，比较逻辑会变得繁琐，且深比较可能影响性能。

4. 移除子组件的connect，从父组件传递action

如果TodoItem只需要父组件传递的todo和dispatch一个action，可以把checkTodo的connect移到父组件Todos中，然后通过props传递给子组件：

修改Todos.js：

import { checkTodo } from "../actions/todosAction";

// 父组件添加mapDispatchToProps
const mapDispatchToProps = dispatch => ({
  checkTodo: id => dispatch(checkTodo(id))
});

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

// render时传递checkTodo给子组件
{this.props.todos.map(todo => {
  return <TodoItem todo={todo} key={todo.id} checkTodo={this.props.checkTodo}></TodoItem>;
})}

修改TodoItem.js：

// 移除connect，直接使用父组件传递的checkTodo
class TodoItem extends Component {
  onChange = (e, id) => {
    this.props.checkTodo(id);
  };
  render() {
    // ... 正常渲染逻辑
  }
}

export default TodoItem;

不过这种方法还是需要配合第一种reducer的写法（返回新的todo对象），否则React类组件的默认浅比较还是会跳过重渲染。

为什么forceUpdate()能解决问题？

forceUpdate()会强制组件跳过shouldComponentUpdate的检查，直接调用render方法，所以不管props的引用有没有变化，都会重新渲染。但这是一种hack的解决方式，不推荐长期使用——因为它绕过了React的性能优化机制，可能导致不必要的重渲染，而且没有从根本上解决状态更新的不可变性问题。

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