需要分离数据逻辑与 UI…

在 React 中把数据获取与业务逻辑从 UI 渲染中剥离，以提升可测试性与复用性。

适用场景

解决思路

1. 将组件拆成两部分：容器组件负责数据获取与状态，展示组件负责渲染。
2. 让展示组件通过 props 接收数据，只负责按预期展示（含样式），不修改收到的数据。
3. 把展示组件写成纯函数，通常无自身 state，除非该 state 仅用于 UI 目的。
4. 让容器组件把数据传给它所包含的展示组件；容器组件自身通常不渲染其他组件、也不含样式。
5. 在现代 React 中优先用自定义 Hook 替代容器组件来实现同样的关注点分离，例如编写 useDogImages() 用 useState 与 useEffect 调用 fetch 获取数据并返回结果数组。
6. 使用 Hook 后，直接在展示组件中调用该 Hook 获取数据，省去包裹用的容器组件层，同时仍保持逻辑与视图分离。
7. 仅在确实能简化架构时使用该模式，小项目或小组件不要强行套用。
8. 利用该模式带来的好处：展示组件可复用、可由不熟悉代码库的人（如设计师）修改外观且改动在全应用一致、作为纯函数易于测试而无需 mock 数据源。

适用边界 · 注意事项

• 小型组件：拆成两个文件只增加开销而无实际收益。
• 当 Hook 已经封装了数据逻辑时，再单独建容器组件是多余的。
• 一次性、两层都没有复用可能的视图组件。