结合自定义 Hook 和高阶组件的最佳实践

在 React 中，自定义 Hook 和高阶组件（HOC）是两种强大的代码复用工具，它们各有优势。结合使用这两种模式可以构建更灵活、可维护的应用架构。以下是结合它们的最佳实践：

一、明确职责分工

• 自定义 Hook：复用有状态的逻辑（如状态管理、副作用），不直接涉及 UI。
• 高阶组件：增强组件功能（如注入 props、状态、生命周期逻辑），可能涉及 UI 包装。

示例：权限控制

// useAuth.js (自定义 Hook)
import { useContext } from 'react';
import { AuthContext } from './AuthContext';

const useAuth = () => {
  return useContext(AuthContext);
};

// withAuth.js (高阶组件)
import { useAuth } from './useAuth';

const withAuth = (WrappedComponent) => {
  return (props) => {
    const { user } = useAuth();

    if (!user) {
      return <Redirect to="/login" />;
    }

    return <WrappedComponent {...props} user={user} />;
  };
};

二、用自定义 Hook 封装状态逻辑，用 HOC 增强组件

将复杂的状态管理逻辑放在 Hook 中，然后通过 HOC 将 Hook 的结果注入组件。

示例：数据获取与加载状态

// useDataFetch.js (自定义 Hook)
import { useState, useEffect } from 'react';

const useDataFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

// withData.js (高阶组件)
import { useDataFetch } from './useDataFetch';

const withData = (url) => (WrappedComponent) => {
  return (props) => {
    const { data, loading, error } = useDataFetch(url);

    if (loading) {
      return <div>Loading...</div>;
    }

    if (error) {
      return <div>Error: {error.message}</div>;
    }

    return <WrappedComponent {...props} data={data} />;
  };
};

// 使用 HOC
const UserList = ({ data }) => (
  <ul>
    {data.map(user => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

const EnhancedUserList = withData('https://api.example.com/users')(UserList);

三、用自定义 Hook 替代高阶组件中的状态逻辑

许多高阶组件的功能可以用 Hook 更简洁地实现，减少组件嵌套。

示例：避免 HOC 嵌套，改用 Hook

// 传统 HOC 方式（存在嵌套问题）
const EnhancedComponent = withLoading(withAuth(MyComponent));

// 改用 Hook（扁平化）
const MyComponent = () => {
  const { user } = useAuth();
  const { data, loading } = useDataFetch('https://api.example.com/data');

  if (!user) return <Redirect to="/login" />;
  if (loading) return <div>Loading...</div>;

  return <div>Data: {data}</div>;
};

四、用 HOC 处理跨组件的 UI 增强

当需要统一修改组件的 UI 结构时，HOC 比 Hook 更合适。

示例：添加统一的布局

// withLayout.js (高阶组件)
const withLayout = (WrappedComponent) => {
  return (props) => (
    <div className="app-layout">
      <Header />
      <Sidebar />
      <main className="content">
        <WrappedComponent {...props} />
      </main>
      <Footer />
    </div>
  );
};

// 使用 HOC
const Dashboard = () => <h1>Dashboard</h1>;
const LayoutDashboard = withLayout(Dashboard);

五、结合 Hook 和 HOC 实现复杂功能

将 Hook 的状态管理能力与 HOC 的组件增强能力结合。

示例：表单验证

// useForm.js (自定义 Hook)
import { useState } from 'react';

const useForm = (initialValues, validate) => {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  const [submitting, setSubmitting] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setErrors(validate(values));
    setSubmitting(true);
  };

  return { values, errors, submitting, handleChange, handleSubmit };
};

// withForm.js (高阶组件)
import { useForm } from './useForm';

const withForm = (initialValues, validate) => (WrappedComponent) => {
  return (props) => {
    const form = useForm(initialValues, validate);

    return <WrappedComponent {...props} form={form} />;
  };
};

// 使用 HOC
const LoginForm = ({ form }) => {
  const { values, errors, handleChange, handleSubmit } = form;

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        name="username" 
        value={values.username} 
        onChange={handleChange} 
      />
      {errors.username && <span>{errors.username}</span>}
      <button type="submit">Login</button>
    </form>
  );
};

const EnhancedLoginForm = withForm(
  { username: '', password: '' },
  (values) => {
    const errors = {};
    if (!values.username) errors.username = 'Required';
    return errors;
  }
)(LoginForm);

六、最佳实践总结

1. 优先使用 Hook：对于状态逻辑复用，优先使用 Hook，避免不必要的组件嵌套。
2. HOC 用于 UI 增强：当需要统一修改组件的 UI 结构或生命周期时，使用 HOC。
3. 避免过度嵌套：过多的 HOC 嵌套会导致“嵌套地狱”，可通过 compose 函数或 Hook 简化。
4. 状态逻辑下沉：将状态管理逻辑放在 Hook 中，HOC 专注于组件组合。
5. 类型安全：在 TypeScript 中，使用泛型确保 HOC 和 Hook 的类型安全。

示例：TypeScript 中的 HOC 和 Hook

// withData.ts (TypeScript HOC)
import {
    ComponentType, FC } from 'react';

type DataProps<T> = {
   
  data: T;
};

const withData = <T, P extends object>(url: string) => (
  WrappedComponent: ComponentType<P & DataProps<T>>
): FC<P> => {
   
  const EnhancedComponent: FC<P> = (props) => {
   
    const {
    data } = useDataFetch<T>(url);

    if (!data) return <div>Loading...</div>;

    return <WrappedComponent {
   ...props} data={
   data} />;
  };

  return EnhancedComponent;
};

七、何时选择 Hook 或 HOC？

通过合理结合自定义 Hook 和高阶组件，可以充分发挥它们的优势，构建出既灵活又易于维护的 React 应用。