老实说，

上来就踩了个最经典的坑

我上周写这个 Todo List 的时候。第一版写得特别快，二十分钟就把界面和逻辑堆完了。其实，接下来点复选框试了一下 —— 纹丝不动。

控制台没报错，代码看着也没写错。我对着 checked={todo.completed} 这行盯了十分钟，来回改了好几种写法，勾选状态就是不更新。当时我人都懵了心想难道我学的 React 是假的？

后来随手打印了一下 todo 对象，发现值其实已经变了但界面就是不刷新。那一刻我突然反应过来：我直接在子组件里改了 props 传过来的对象属性。

就是这么个入门级的坑，结结实实卡了我半小时。也正是因为这个坑，我才停下来好好捋了一遍 React 父子组件通信的逻辑。而不是照着教程抄完就完事。

使用者痛点：直接修改 props 或 state 对象导致 UI 不更新，让初学者误以为代码无效； 说起来，在调试时会花费大量时间排查引用问题。 话说回来，

先别急着写代码。先想清楚组件怎么拆

最开始我所有代码全塞在 App.js 里输入框、列表、统计栏挤成一团。加个 “清除已完成” 按钮都要翻半天找位置，越写越烦躁。怎么说呢，

后来干脆停手不写了先在草稿纸上画组件结构。其实拆分逻辑特别朴素：功能独立的块，就单独拎出来做一个组件

• 顶部输入框，只负责接收使用者输入、添加新 todo，单独拆成 TodoInput
• 中间的列表，只负责渲染每一条 todo、处理勾选和删除，拆成 TodoList
• 底部的统计数字和清除按钮，只负责展示数据、触发清空操作。拆成 TodoStats

拆完之后整个项目目录一下就清爽了：

src/
├── App.js // 父组件，管所有数据
├── App.css
└── components/
├── TodoInput.js
├── TodoList.js
└── TodoStats.js

使用者痛点：Poorly split components lead to “one file too big” problems;difficult to locate where changes should happen.

父子通信到底是个啥逻辑

拆完组件问题就来了：数据放哪？总不能每个组件自己存一份 todo 数据吧，那数据不同步肯定乱套。

至于答案很简单，数据全部放在最顶层的父组件 App 里统一管理，子组件自己不存数据，只负责渲染和触发事件

I 当时想了个特别土的比方。一下就通了： 父组件 App 就是公司老板...

• TodInput 是前台…
• TodList 是执行部…
• TodStats 是行政…

"所有修改都必须经过老板..." 等等。

一步步把代码写出来

父组件的观点是，所有数据都攥在手里

import { useState } from "react";import TodoInput from "./components/TodoInput"
import TodoList from "./components/TodoList"
import TodoStats from "./components/TodoStats"
import "./App.css"
const App = => {
// 所有 todo 数据都存在这里唯一数据源
const = useState()
// 添加 todo
const addTodo = => {
if === "") return
// 注意这里：必须返回全新的数组...
setTodos()
}
// 切换 todo 的完成状态
const toggleTodo = => {
setTodos(todos.map(todo =>
todo.id === id?{...todo,completed!:，todo.completed} : todo))
}
// 删除单条 todo
const deleteTodo = => {
setTodos)
}
// 清除所有已完成的 todo
const clearCompleted = => {
setTodos)
}
const activeCount = todos.filter.length;const completedCount = todos.length - activeCount;return (





)
}
export default App

关键点提示： 每次修改状态，都要返回一个全新的数组/对象！否则 React 无法检测到变化。其实，

从输入组件来看。自己的小状态自己管

import { useState } from "react";其实，const TodoInput = => {
const = useState;const handleSubmit=e=>{
e.preventDefault;onAdd，setInputValue;}
return (

setInputValue}
placeholder="添加新的 todo">
添加

)
}
export default TodoInput

再看列表组件。我只负责渲染，改数据别找我

const TodoList==>(

{todos.length===0?(

暂无 todo
)
:(todos.map(todo=>(

onToggle} /> {todo.text}
onDelete}>×

)
))}

)
export default TodoList

说到统计组件，最纯粹的 “工具人”

const TodoStats==>(

p>Total:{total}|Active:{active}|Completed:{completed}
{completed&&(
onClearCompleted}>
懨内°定巾 )}

)
export default TodoStats

说到回头再想，为什么非要绕这一圈？话说回来，

常见困惑： "如果能直接让子改父的数据。这样不是更方便吗，" 

.直接修改 state里的对象/数组导致界面不更新.

.事件回调加括号导致页面加载即执行.

.setState后立即读值得到旧值.

最终说两句 — 使用者经验