用高阶Hooks实现跨组件逻辑注入

超越Hooks单一职责，通过函数式组合模式创建可复用的hook工厂 · 难度：入门 · +10XP

Hook的元编程能力

当多个组件需要共享相似的useState/useEffect逻辑但参数不同时，传统Hooks无法灵活组合。本教程引入高阶Hooks概念：接收一个配置对象返回一个新Hook函数。通过compose函数将多个高阶Hooks合并执行，实现类似高阶组件的逻辑注入能力，但保持_hook调用规则。

function withLogging(hookFactory) {
  return function enhancedHook(...args) {
    useEffect(() => console.log('mount'), []);
    return hookFactory(...args);
  };
}
function withValidation(hookFactory) {
  return function validatedHook(...args) {
    const result = hookFactory(...args);
    if (typeof result !== 'object') throw Error('Invalid');
    return result;
  };
}
const useSafeState = compose(withLogging, withValidation)(useState);