React中如何在Todo组件内封装逻辑同步状态触发重渲染

你遇到的「直接修改对象值能更新原始数据，但不触发组件重渲染、useEffect也感知不到变更」，是React和Vue/Svelte的核心设计差异导致的：

• Vue、Svelte底层实现了响应式代理，修改对象属性时框架能自动追踪变更，精准触发对应组件的更新
• React本身没有做细粒度的响应式追踪，只有调用状态对应的setter函数、传入新的状态引用时，才会触发重渲染，直接修改原状态对象哪怕值真的变了，React也感知不到，自然不会重跑渲染逻辑。

完全可以把待办项的交互逻辑全下沉到Todo组件内部，不需要在父组件写大量重复的传参逻辑，用React原生能力就能实现，代码量非常少：

• 父组件App里只需要写一次通用的待办项更新方法即可，不用为每个交互单独写处理函数

const [todos, setTodos] = useState(/* 初始待办列表 */)
// 整个App里仅需写这一个更新方法，所有待办项的修改都能复用
const updateTodo = (targetId, patch) => {
  setTodos(prevList => prevList.map(item => 
    item.id === targetId ? {...item, ...patch} : item
  ))
}

• 渲染列表时，把单个待办数据和这个通用更新方法一起传给子组件就行，不需要额外包裹箭头函数传参

{todos.map(todo => (
  <Todo key={todo.id} todo={todo} onUpdate={updateTodo} />
))}

• 所有切换完成状态、编辑待办内容的逻辑，全放在Todo组件内部实现，父组件完全不需要感知子组件的交互细节

function Todo({todo, onUpdate}) {
  // 切换状态的逻辑完全封装在组件内部，父组件无需关心
  const handleToggle = () => {
    onUpdate(todo.id, { completed: !todo.completed })
  }

  return (
    <li>
      <input type="checkbox" checked={todo.completed} onChange={handleToggle} />
      <span className={todo.completed ? 'done' : ''}>{todo.text}</span>
    </li>
  )
}

这种写法几乎没有冗余代码：父组件只需要维护最基础的列表状态和通用更新方法，单个待办项的所有交互逻辑都封装在子组件里，封装性和你提到的Vue/Svelte开发体验差距很小，也完全不需要引入任何外部状态管理库。

如果你觉得手写map返回新对象太繁琐，也可以用useImmer这个轻量工具（不属于重型状态管理方案），更新逻辑可以写得更接近直接赋值的体验：

const updateTodo = (targetId, patch) => {
  setTodos(draft => {
    const target = draft.find(item => item.id === targetId)
    Object.assign(target, patch)
  })
}

写起来和直接修改prop的感受几乎一致，本质还是通过setter触发React更新，完全符合React的运行规则，不会出现数据修改后视图不同步的问题。

注意不要直接修改传入的todo prop，哪怕你能通过对象引用改到父组件的状态值，也违反了React单向数据流的约定，后续很容易出现难以排查的渲染bug。

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