这三者都在组件之间共享逻辑，但它们是随着时间演进出来的，而自定义 hook 是共享逻辑的现代默认方案。
高阶组件（HOC）
一个接收组件并返回增强后组件的函数：
jsx
= => {
user = ();
user ? : ;
};
= ();
缺点：包裹层嵌套（树中的「wrapper hell」）、prop 命名冲突，并且注入的 props 来自哪里不够清晰。
一个组件以函数作为它的 child 来共享 state：
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
灵活，但是嵌套多个 render-prop 组件会形成「回调金字塔」。
把有状态的逻辑提取到一个 useX 函数中——没有额外的树嵌套，数据流也很明确：
function useMouse() {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => { /* attach listener, cleanup */ }, []);
return pos;
}
function Component() {
const { x, y } = useMouse(); // clear, flat, composable
}
children/组件）。