Props的传递学习

1. 抽离状态与逻辑，解耦 App 组件

把 todos 数据、增 / 改 / 删 todo 的业务逻辑 全部放到自定义 Hook useTodos 里，App 只做页面组装，不维护复杂状态和逻辑。

2. 组件职责单一（单一职责原则）

• App：父容器 / 入口，只负责拼接子组件、传递方法
• TodoInput：只负责输入、触发新增
• TodoList：只负责渲染列表、触发切换 / 删除
• useTodos：只负责状态管理 + 业务函数

各司其职，代码更清晰。

3. 逻辑复用

useTodos 是独立 Hook，任意组件都可以再次引入使用，不用重复写 todo 增删改逻辑。

4. 便于维护和迭代

后续改 todo 规则、加筛选 / 编辑功能，只改 useTodos 即可，不用动视图组件；视图和逻辑彻底分离，排查 bug、扩展功能更轻松。

---

简单总结：把状态和业务逻辑抽进自定义 Hook，视图拆成独立子组件，实现解耦、复用、易维护。 在 React 的组件化开发中，我们经常会遇到这样的场景：最底层的 UI 组件（如一个按钮或输入框）触发了一个事件，但最终修改的却是顶层组件的状态。这种"底层触发、顶层执行"的机制，正是 React 单向数据流 与事件层层透传的核心体现。

今天，我们就以 TodoItem 组件为例，彻底拆解这条从子组件到父组件的完整调用链路。

---

一、 核心认知：子组件只认"直属父组件"

在深入代码之前，我们需要建立一个核心认知：在 React 中，子组件是完全不知道顶层组件（如 App）存在的。

当我们在 TodoItem 中调用 onToggle 时，它调用的仅仅是直属父组件 （TodoList）通过 props 传下来的一个函数。至于这个函数最初是在哪里定义的，TodoItem 并不关心。它就像是一个"传声筒"，只负责在触发事件时，执行上级交代的任务。

---

二、 完整链路拆解：层层向上的调用之旅

让我们把整条链路分为三个节点，看看一个点击事件是如何一步步向上传递的。

1. 终端触发：TodoItem 执行 Props 方法

在最底层的 TodoItem 组件中，我们通过解构拿到了父组件传来的 onToggle 和 onRemove。当用户勾选复选框时，会触发 onChange 事件：

tsx

编辑

// components/TodoItem.tsx
const TodoItem: React.FC<Props> = ({ todo, onToggle, onRemove }) => {
    return (
        <li>
            <input 
                type="checkbox" 
                checked={todo.completed} 
                // 触发事件时，执行父组件传下来的 onToggle，并传入当前 id
                onChange={() => onToggle(todo.id)} 
            />
            {/* ... */}
        </li>
    )
}

关键点 ：这里的 onToggle 是 TodoItem 自身 props 里的属性，它不知道 App 的存在。

2. 中间枢纽：TodoList 的"原样转发"

TodoItem 的父组件是 TodoList。TodoList 自身也是通过解构，从它的父组件（App）那里接收到了 onToggle 和 onRemove。在渲染 TodoItem 时，它只是把这些属性原封不动地传递了下去：

tsx

编辑

// components/TodoList.tsx
const TodoList: React.FC<Props> = ({ todos, onToggle, onRemove }) => {
    return (
        <ul>
            {todos.map((todo) => (
                <TodoItem 
                    key={todo.id} 
                    todo={todo}
                    // 等号右侧的 onToggle 是 TodoList 自身的 props
                    // 等号左侧的 onToggle 是传给 TodoItem 的 props 名称
                    onToggle={onToggle}  
                    onRemove={onRemove}
                />
            ))}
        </ul>
    )
}

关键点 ：TodoList 在这里扮演了"桥梁"的角色，它接收参数，再作为参数传递给下级。

3. 逻辑源头：App 组件的真正执行

整条链路的终点（也是起点），是 App 组件。App 从自定义 Hook useTodos 中获取了真正的业务逻辑方法，并将它们作为属性传递给了 TodoList：

tsx

编辑

// App.tsx
export default function App() {
  // 从 Hook 中获取真正的业务逻辑函数
  const { todos, addTodo, toggleTodo, removeTodo } = useTodos();

  return (
    <div>
      <TodoList 
        todos={todos}
        onToggle={toggleTodo}   // 将 App 的方法作为 props 传递
        onRemove={removeTodo}
      />
    </div>
  )
}

关键点 ：真正修改数据、执行状态更新的代码，定义在 App 或 useTodos 中。

---

三、 一图看懂：事件透传的数据流向

为了更直观地理解，我们可以将这条链路抽象为以下流程：

text

编辑

[逻辑源头] App / useTodos (持有真正的 toggleTodo/removeTodo)
      ↓ (通过 props 向下传递)
[中间枢纽] TodoList (接收 onToggle/onRemove，并原样透传)
      ↓ (通过 props 向下传递)
[终端触发] TodoItem (接收 onToggle，在 onChange 时执行)

当用户点击时，执行顺序则是由下往上 的：

TodoItem 触发 ️ 执行 props.onToggle ️ TodoList 转发的 props ️ App 内部真正的 toggleTodo 函数。

---

四、 总结与最佳实践

通过上述拆解，我们可以得出 React 事件透传的几个核心原则：

1. 单向数据流：状态在顶层管理，通过 Props 逐层下发；事件在底层触发，通过回调函数逐层上报。
2. 职责分离 ：底层组件（如 TodoItem）只负责 UI 展示和事件触发，绝不包含核心业务逻辑。
3. 命名规范 ：在层层透传时，保持 prop 名称的一致性（如都叫 onToggle），这能极大降低维护成本，让代码像接力棒一样清晰传递。

理解了这条链路，你就掌握了 React 组件通信的精髓。下次再遇到多层嵌套的组件，不妨顺着这条链路，看看数据是如何流转的！