痛点这方面，Props 传递的困扰

在大型 React 项目中。开发者常常会遇到以下问题：

• ❌ 层层嵌套的组件需要把同一个数据或回调函数向下逐级传递导致代码冗余、阅读困难。
• ❌ 子组件只需要部分数据，却被迫接收整棵树的所有 Props增加了不必要的渲染开销。说起来，
• ❌ 业务逻辑散落在多个 UI 组件里后期维护、功能 时容易出错。
• ❌ 状态与视图耦合紧密导致每次业务规则变化都要修改大量组件。

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

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

组件职责单一

• App: 父容器 / 入口仅负责拼接子组件、向下透传必要的方法。
• TodoInput: 专注输入、触发新增。
• TodoList: 专注渲染列表、触发切换 / 删除.
• useTodos: 专注状态管理 + 业务函数.

各司其职，使代码结构更清晰、更易理解。

逻辑复用

useTodos 是独立的 Hook。任意组件都可以直接引入使用,无需重复编写 todo 增删改的实现细节。

便于维护和迭代

后续若需要修改 todo 的业务规则、添加筛选或编辑功能。只需在 --,就可以完成，不必触碰视图层组件；按理说，视图与逻辑彻底分离，让 bug 排查和功能 变得轻松。老实说，

Avoid Prop Drilling 的实际方法

#1 使用 React Context 集中共享数据

Pain point： 当同一个状态需要在多层嵌套的子树中被消费时每一层都必须显式地声明 Props。使用 Context 可以一次性把数据注入整棵子树，省去中间层的“转发”。不过，

const TodosContext = React.createContext;话说回来，function App {
const todosHook = useTodos;return (




);
}
function TodoInput {
const { addTodo } = React.useContext;// ...
}
function TodoList {
const { todos。toggleTodo,deleteTodo } = React.useContext;// ...
}

#2 用组合而非属性穿透实现复用 UI

Pain point： 很多时候我们想让父组件提供“容器”功能，而子组件只负责渲染。通过 children 或 render props。把业务函数作为回调而不是硬编码在每个子节点上，可以大幅降低 Props 的数量。

function Card {
return 

{children}
}
function App {
const { addTodo } = useTodos;return (



);}

#3 用自定义 Hook 把“状态 + 方法”封装成对象返回

The -style hook already demonstrates this pattern: it returns an object containing both state and mutating functions . By passing this single object downstream。you avoid scattering dozens of individual Props.

Pitfalls to Watch Out For

• Avoid over‑using Context for everything. 虽然 Context 能解决 Prop Drilling，但滥用会导致不可预期的重渲染。我建议仅对跨多层且变化频率相对较低的数据使用。
• No “props explosion”.  如果一个子组件只需要其中的一两个字段。请使用解构或 selector 函数挑选必要的数据，而不是把整个对象整体传递进去。
• 保持 Hook 名称以 “use” 开头. 这样 ESLint 才能正确识别并检查 Hook 调用规则。

Total Takeaway

- 将业务状态和操作封装进自定义 Hook（如 useTodos )，让 UI 层保持“纯展示”。不过，- 使用 Context 或组合模式避免深度 Prop Drilling。- 坚持单一职责原则，使每个组件只关注一种任务。从而提高可读性、可维护性和可复用性。

.