const EnhancedComponent = higherOrderComponent(WrappedComponent);

const ConnectedComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(Component);

const ComponentWithRouter = withRouter(Component);

function withAuth(WrappedComponent) {
  return class extends React.Component {
    state = { hasPermission: false };
    
    async componentDidMount() {
      const user = await fetchUser();
      this.setState({ 
        hasPermission: user.role === 'admin'
      });
    }
    
    render() {
      return this.state.hasPermission 
        ? <WrappedComponent {...this.props} />
        : <div>无访问权限</div>;
    }
  }
}

// 使用
const AdminPanel = withAuth(PanelComponent);

// 普通函数
add(1, 2, 3); 

// 柯里化函数
add(1)(2)(3)();

function add(x) {
  // 存储所有参数的数组
  let sum = x;
  
  // 定义内部函数
  function innerAdd(y) {
    if (y !== undefined) {
      sum += y;
      return innerAdd; // 返回自身支持链式调用
    }
    return sum; // 无参调用时返回结果
  }
  
  // 重写valueOf实现隐式转换
  innerAdd.valueOf = () => sum;
  
  // 重写toString便于调试
  innerAdd.toString = () => `CurriedSum(${sum})`;
  
  return innerAdd;
}

// 基础用法
console.log(add(1)(2)(3)()); // 6

// 隐式转换
console.log(+add(1)(2)(3));  // 6 (触发valueOf)
console.log(add(1)(2)(3) + 4); // 10

// 无限链式
const sum = add(1)(2)(3)(4)(5);
console.log(sum()); // 15

// 分段调用
const addTwo = add(1)(1);
console.log(addTwo(3)()); // 5
console.log(addTwo(5)()); // 7

// 柯里化风格HOC工厂
const withFeature = (featureName) => (WrappedComponent) => {
  return class extends React.Component {
    featureMethod() {
      console.log(`执行${featureName}功能`);
    }
    
    render() {
      return <WrappedComponent 
        {...this.props} 
        featureMethod={this.featureMethod} 
      />;
    }
  }
}

// 使用
const withLogger = withFeature('日志记录');
const EnhancedComponent = withLogger(MyComponent);

// 使用Hooks替代HOC示例
function useAuth() {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser().then(setUser);
  }, []);
  
  return {
    isAdmin: user?.role === 'admin'
  };
}

// 组件内使用
function AdminPanel() {
  const { isAdmin } = useAuth();
  return isAdmin ? <Panel /> : <DeniedView />;
}

function Counter() {
  // 使用闭包管理状态
  const [count, setCount] = useState(0);
  
  // 每次渲染都是独立闭包
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    // 状态存储在实例属性中
    this.state = { count: 0 };
  }
  
  // 使用类方法更新状态
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }
  
  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

useEffect(() => {
  // componentDidMount + componentDidUpdate
  fetchData();
  
  return () => {
    // componentWillUnmount
    abortController.abort();
  };
}, [dependencies]); // 依赖项控制执行时机

componentDidMount() {
  fetchData();
}

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    refetchData();
  }
}

componentWillUnmount() {
  abortController.abort();
}

const MemoizedComponent = React.memo(
  function MyComponent(props) {
    /* 仅在 props 改变时重新渲染 */
  },
  (prevProps, nextProps) => {
    /* 自定义比较函数 */
  }
);

function Parent() {
  const callback = useCallback(() => {
    // 记忆化函数
  }, [deps]);
  
  return <Child onClick={callback} />;
}

class MyComponent extends React.PureComponent {
  // 自动浅比较 props 和 state
  
  shouldComponentUpdate(nextProps, nextState) {
    // 手动控制更新逻辑
    return this.props.id !== nextProps.id;
  }
}

// 自定义 Hook
function useFetch(url) {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch(url).then(r => r.json()).then(setData);
  }, [url]);
  
  return data;
}

// 多个组件复用相同逻辑
function UserProfile() {
  const user = useFetch('/api/user');
  // ...
}

// 高阶组件模式
const withFetch = (url) => (WrappedComponent) => {
  return class extends React.Component {
    state = { data: null };
    
    componentDidMount() {
      fetch(url).then(r => r.json()).then(data => 
        this.setState({ data }));
    }
    
    render() {
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  }
}

// 使用高阶组件
class UserProfile extends React.Component {
  render() {
    const { data } = this.props;
    // ...
  }
}

export default withFetch('/api/user')(UserProfile);

function Timer() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const id = setInterval(() => {
      // 闭包捕获初始 count 值
      setCount(count + 1); // 始终为 1
    }, 1000);
    
    return () => clearInterval(id);
  }, []); // 空依赖数组
  // 正确方式: setCount(c => c + 1)
}

class Timer extends React.Component {
  state = { count: 0 };
  
  componentDidMount() {
    this.interval = setInterval(() => {
      // 总是访问最新 state
      this.setState({ count: this.state.count + 1 });
    }, 1000);
  }
  
  componentWillUnmount() {
    clearInterval(this.interval);
  }
}

function UserProfile({ userId }) {
  // 每次 userId 变化都会触发重新获取
  const user = useFetch(`/api/users/${userId}`);
  
  // ...
}

class UserProfile extends React.Component {
  componentDidMount() {
    this.fetchUser(this.props.userId);
  }
  
  componentDidUpdate(prevProps) {
    if (prevProps.userId !== this.props.userId) {
      this.fetchUser(this.props.userId);
    }
  }
  
  fetchUser(id) {
    // ...
  }
}