React高级模式包括Render Props、高阶组件、复合组件和自定义Hook，用于提升组件复用性与可维护性。1. Render Props通过函数prop传递状态，实现逻辑与UI分离；2. 高阶组件（HOC）用于复用横切关注点逻辑，但易导致嵌套过深；3. 复合组件通过共享状态提供清晰的API结构，增强组件协作；4. 自定义Hook是当前推荐的逻辑复用方式，简洁且易于测试。实际开发中应优先使用自定义Hook和Render Props，遵循组合优于继承的设计理念。
React 高级模式并不是指某种复杂的语法，而是开发者在构建大型、可维护应用时总结出的最佳实践和设计思路。掌握这些模式能让你的组件更灵活、复用性更高，也更容易测试和维护。
1. Render Props 模式
这种模式通过一个名为 render 的 prop 来传递函数，让组件把自身的状态或逻辑共享给其他组件。
比如你有一个追踪鼠标位置的组件，你可以用 render props 把位置数据传出去：
const MouseTracker = ({ render }) => {
const [position, setPosition] = useState({ x: 0, y: 0 });
useEffect(() => {
const handleMove = (e) => {
setPosition({ x: e.clientX, y: e.clientY });
};
window.addEventListener('mousemove', handleMove);
return () => window.removeEventListener('mousemove', handleMove);
}, []);
return {render(position)};
};
// 使用
(
鼠标位置：{x}, {y}
立即学习“Java免费学习笔记（深入）”；
)} />
这种方式解耦了状态逻辑与 UI 渲染，适合封装通用行为。
2. 高阶组件（HOC）
高阶组件是一个函数，接收一个组件并返回一个新的增强组件。它常用于横切关注点，比如权限控制、日志、加载状态等。
const withLoading = (WrappedComponent) => {
return (props) => {
if (props.isLoading) {
return 加载中...;
}
return
HOC 能复用逻辑，但容易造成嵌套过深或 props 冲突，使用时注意命名空间和透传必要属性。
3. Compound Components（复合组件）
这种模式允许你创建一组协同工作的子组件，共享内部状态，同时保持良好的 API 可读性。
例如实现一个下拉菜单：
const Dropdown = ({ children }) => {
const [isOpen, setIsOpen] = useState(false);
return (
{React.Children.map(children, child =>
React.isValidElement(child)
? React.cloneElement(child, { isOpen, toggle: () => setIsOpen(!isOpen) })
: child
)}
);
};
Dropdown.Button = ({ toggle, isOpen }) => (
);
Dropdown.Menu = ({ isOpen, children }) => (
isOpen ? - {children}
这样调用起来很清晰：
选项1 选项2
用户不需要手动传状态，组件之间自动协作。
4. 自定义 Hook
这是目前最推荐的逻辑复用方式。将可复用的状态逻辑提取成自定义 Hook，既简洁又易于测试。
比如封装一个获取窗口大小的功能：
const useWindowSize = () => {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
useEffect(() => {
const handleResize = () => {
setSize({
width: window.innerWidth,
height: window.innerHeight
});
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
};
// 使用
function App() {
const { width, height } = useWindowSize();
return 窗口尺寸：{width} x {height}
;
}
只要是涉及状态和副作用的逻辑，都可以尝试封装成 Hook。
基本上就这些。这些模式各有适用场景，关键不是记住名字，而是理解它们解决的问题。实际开发中，优先考虑自定义 Hook 和 render props，避免过度使用 HOC 带来的复杂性。组合优于继承，这也是 React 的哲学。
