在多个 React 组件间复用鉴权、日志…

同一段不需要定制的横切行为要套用到很多组件、且组件本身能脱离该逻辑独立工作时，用高阶组件（HOC）集中复用这段逻辑。

适用场景

解决思路

1. 编写一个函数，接收一个组件作为参数，返回一个带增强行为的新组件（即 HOC）。
2. 不要在被复用逻辑里硬编码 API url 等可变值，而是把它们作为 HOC 的额外参数传入（如 withLoader(Element, url)），使同一个 HOC 能用于任意组件和任意 API 端点。
3. HOC 返回一个函数组件 props => {}，在其中用 useEffect 从传入的 url 拉取数据；数据尚未返回时渲染包含 "Loading..." 文本的元素作为占位。
4. 数据获取完成后把 data 设为返回的数据，此时 data 不再为 null，就渲染传入的那个元素，并把取到的数据作为 prop 传给它。
5. 在使用方不要直接导出原始组件，而是导出被 HOC 包裹后的版本，例如 export default withLoader(DogImages, "https://dog.ceo/api/breed/labrador/images/random/6")。
6. 通过重命名 prop 或合并 prop 来避免命名冲突：例如在 withStyles 中先构造 style 对象，再展开传入的 props.style（{ padding, margin, ...props.style }），防止 HOC 注入的 style 覆盖组件原有的 style。
7. 组合多个 HOC 时要有意识地安排包裹顺序（如把 withHover 包在 withLoader 外层），并意识到组合顺序会影响 props 的传递和最终行为。
8. 对大多数新代码优先选用 React Hooks 而不是 HOC，以避免 wrapper hell 和深层嵌套的组件树（如 withAuth > withLayout > withLogging > Component）。
9. 需要用 Hooks 替换某个 HOC 时：导出一个 hook（如 useHover）而不是包装组件；在 hook 内用 useEffect 给元素添加 mouseOver/mouseLeave 事件监听、据此把 hovering 设为 true/false，并从 hook 同时返回 ref（挂到需要监听事件的组件上）和 hovering（用于条件渲染 "Hovering!" 文本框），然后在组件内部直接调用该 hook 而不再包裹组件。
10. 当组件需要访问多个数据源/resolver 时，用多个 hook（如 useMutation）写在组件内，替代组合多个 graphql() 之类的 HOC，以减少样板代码、避免 HOC 组合顺序引发的 bug，并让数据来源更易理解和重构。

适用边界 · 注意事项

• 当自定义 Hooks 能以更少嵌套、更好可读性达成同样效果时。
• 在 React 18+ 的新代码中，Hooks 已是共享有状态逻辑的惯用做法时。
• 当 HOC 包装会造成 prop 名冲突，或在 DevTools 中让组件树变得难以看清时。