React Strict Mode与Fragment下Todo toggle功能表现差异问题咨询

首先要明确：Fragment 和 Strict Mode 根本不是同一维度的可选项，两者定位完全不同，不存在"二选一运行"的对等关系。

两个特性的核心区别 #

• Fragment（语法糖写法<>...</>）：仅用于解决JSX要求单一根节点的语法限制，不会渲染额外DOM节点，也不会干预React的任何渲染、执行逻辑，包裹组件时React会按默认流程执行代码，没有附加的检测或特殊逻辑。
• Strict Mode（即<React.StrictMode>）：是React专为开发环境设计的代码合规检测工具，同样不会渲染可见UI，但会主动在开发阶段触发重复的渲染、状态更新流程，提前暴露代码中不符合React设计规范的隐性问题，所有检测逻辑仅在开发环境生效，生产环境会自动移除。

Toggle功能失效的根本原因 #

你观察到的"Fragment下正常、Strict Mode下失效"，本质是你的toggle逻辑本身存在不规范写法，普通模式下问题被掩盖，Strict Mode把隐性bug直接暴露了出来。
从现象反推，你的代码99%是写了直接修改状态原值的可变更新逻辑，没有遵循React要求的不可变更新原则，典型错误写法如下：

// 错误示例：直接修改原状态引用
const toggleTodo = (targetId) => {
  const currentTodo = todoList.find(item => item.id === targetId)
  currentTodo.completed = !currentTodo.completed // 直接修改原状态中的对象
  setTodoList(todoList) // 传入setter的还是原数组的引用
}

为什么普通Fragment包裹下"看起来正常" #

非Strict模式的开发环境中，React触发状态更新时只会单次执行渲染流程，你直接修改原状态值的操作，刚好赶上单次渲染读取到修改后的值，所以会误打误撞呈现出符合预期的效果，但这种写法本身就不符合React状态更新规则，生产环境下很容易随机出现视图不更新、更新时序错乱的问题。

为什么Strict Mode下点击无响应 #

React 18之后的Strict Mode会在开发环境刻意对组件渲染函数、状态更新函数做双次调用，目的就是检测不纯的更新逻辑：

1. 第一次执行你的更新逻辑时，直接修改原状态的操作会生效，但React不会直接用这个结果渲染
2. 紧接着React会重置回更新前的原始状态，第二次执行你的更新逻辑做校验
3. 因为你传给状态setter的始终是同一个数组/对象引用，React会判定状态没有发生实际变更，直接跳过重渲染，最终表现就是点击按钮后输出永远不变，toggle完全不生效。

修复方案 #

把toggle逻辑改成标准的不可变更新写法，无论用Strict Mode还是Fragment包裹，功能表现都会完全一致：

// 正确写法：返回全新的状态引用，不修改原值
const toggleTodo = (targetId) => {
  setTodoList(prevList => prevList.map(item => 
    item.id === targetId ? {...item, completed: !item.completed} : item
  ))
}

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