JavaScript内核与高级编程之：`JavaScript`的`Higher-Order Components`：其在 `React` 中的应用与 `Hooks` 的对比。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！今天咱聊聊JavaScript里边一个挺有意思的概念，叫做“高阶组件”（Higher-Order Components，简称HOC）。这玩意儿在React里用得那叫一个溜，但现在又冒出来个Hooks，好像有点抢HOC饭碗的意思。那咱们就好好掰扯掰扯，看看这俩到底谁更胜一筹。

一、啥是高阶组件？别跟我拽英文，说人话！

首先，我们得明白啥是高阶组件。别被“高阶”俩字吓着，其实它本质上就是一个函数！

记住，高阶组件就是一个函数，它接收一个组件作为参数，然后返回一个新的、增强过的组件。

是不是感觉有点像套娃？确实，可以理解为组件的工厂。

举个例子，假设我们有个组件叫 MyComponent，我们想给它加上一些通用功能，比如权限验证、数据加载等等。不用修改 MyComponent 本身的代码，我们可以写一个高阶组件，把 MyComponent 包起来，给它“穿”上一层新的功能。

// 一个简单的组件
function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

// 一个高阶组件，给组件加上权限验证
function withAuthentication(WrappedComponent) {
  return function(props) {
    // 模拟权限验证
    const isAuthenticated = true; // 假设用户已登录

    if (isAuthenticated) {
      return <WrappedComponent {...props} />; // 渲染原始组件
    } else {
      return <div>您没有权限访问此页面。</div>; // 渲染错误提示
    }
  };
}

// 使用高阶组件增强 MyComponent
const AuthenticatedComponent = withAuthentication(MyComponent);

// 使用 AuthenticatedComponent
// 如果 isAuthenticated 为 true，则渲染 MyComponent，否则渲染错误提示
function App() {
  return <AuthenticatedComponent name="World" />;
}

在这个例子里，withAuthentication 就是一个高阶组件。它接收 MyComponent 作为参数，返回一个新的组件，这个新的组件在渲染 MyComponent 之前，会先进行权限验证。

二、React里，HOC都用来干啥？

在React里，HOC 用途可大了去了，主要有以下几个方面：

代码复用： 把一些通用的逻辑（比如数据加载、权限验证、日志记录）提取出来，用 HOC 包裹不同的组件，减少重复代码。
渲染劫持： HOC 可以控制被包裹组件的渲染过程，比如修改 props、添加额外的元素等等。
状态抽象： HOC 可以管理被包裹组件的状态，比如订阅数据源、处理事件等等。
Props 代理： HOC 可以修改传递给被包裹组件的 Props，比如添加默认值、格式化数据等等。

咱们再来几个例子，更直观地感受一下：

1. 数据加载 (Data Fetching)

import React, { useState, useEffect } from 'react';

// 数据加载的 HOC
function withData(WrappedComponent, url) {
  return function(props) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

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

      fetchData();
    }, [url]); // url 变化时重新加载数据

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

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

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

// 一个展示数据的组件
function UserList(props) {
  if (!props.data) {
    return <div>No data available.</div>;
  }

  return (
    <ul>
      {props.data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// 使用 HOC 加载用户数据
const UserListWithData = withData(UserList, 'https://jsonplaceholder.typicode.com/users');

// 在 App 组件中使用 UserListWithData
function App() {
  return <UserListWithData />;
}

这个例子中，withData HOC 负责从 API 获取数据，并将数据作为 data prop 传递给 UserList 组件。UserList 组件只需要专注于展示数据，而不用关心数据从哪里来。

2. 日志记录 (Logging)

import React from 'react';

// 日志记录的 HOC
function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} mounted.`);
    }

    componentWillUnmount() {
      console.log(`Component ${WrappedComponent.name} unmounted.`);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

// 一个简单的按钮组件
function MyButton(props) {
  return <button onClick={props.onClick}>{props.children}</button>;
}

// 使用 HOC 添加日志记录
const LoggedButton = withLogging(MyButton);

// 在 App 组件中使用 LoggedButton
function App() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <LoggedButton onClick={handleClick}>Click Me</LoggedButton>;
}

这个例子中，withLogging HOC 在组件挂载和卸载时记录日志。这样，我们就可以轻松地为多个组件添加日志记录功能，而无需在每个组件中编写重复的代码。

3. Props 代理 (Props Proxy)

import React from 'react';

// Props 代理的 HOC
function withDefaultProps(WrappedComponent, defaultProps) {
  return function(props) {
    const mergedProps = { ...defaultProps, ...props };
    return <WrappedComponent {...mergedProps} />;
  };
}

// 一个接收 name 和 age props 的组件
function Person(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

// 使用 HOC 设置默认的 age prop
const PersonWithDefaultAge = withDefaultProps(Person, { age: 18 });

// 在 App 组件中使用 PersonWithDefaultAge
function App() {
  return <PersonWithDefaultAge name="Alice" />; // age prop 将会是 18
}

这个例子中，withDefaultProps HOC 为 Person 组件设置了默认的 age prop。如果 Person 组件没有接收到 age prop，则会使用默认值 18。

三、HOC的写法，花样还挺多

HOC 的写法主要有三种：

函数形式： 就像咱们最开始举的 withAuthentication 例子，接收一个组件，返回一个新的组件。这是最常见也是最简单的一种写法。

类形式： 使用类来定义 HOC。这种写法可以更好地利用类的特性，比如生命周期方法、状态管理等等。

import React from 'react';

function withEnhancedComponent(WrappedComponent) {
  return class extends React.Component {
    render() {
      return <WrappedComponent {...this.props} enhancedProp="Enhanced!" />;
    }
  };
}

function MyComponent(props) {
  return <div>{props.enhancedProp}</div>;
}

const EnhancedComponent = withEnhancedComponent(MyComponent);

装饰器形式： 使用 ES7 的装饰器语法来定义 HOC。这种写法更加简洁和优雅，但是需要 Babel 或者 TypeScript 等工具的支持。

import React from 'react';

function withEnhancedComponent(WrappedComponent) {
  return class extends React.Component {
    render() {
      return <WrappedComponent {...this.props} enhancedProp="Enhanced!" />;
    }
  };
}

@withEnhancedComponent
class MyComponent extends React.Component {
  render() {
    return <div>{this.props.enhancedProp}</div>;
  }
}

四、HOC的优缺点，咱们得门儿清

HOC 的优点很明显：

可复用性高： 可以把通用的逻辑提取出来，在多个组件之间共享。
逻辑清晰： 可以把组件的逻辑拆分成多个小的 HOC，使代码更加模块化。
不修改原组件： 可以在不修改原组件代码的情况下，增强组件的功能。
关注点分离： 组件只关注自身的展示逻辑，而 HOC 负责处理其他逻辑。

但是，HOC 也有一些缺点：

难以追踪： 嵌套多层 HOC 可能会导致组件的 props 来源难以追踪。
命名冲突： 多个 HOC 可能会使用相同的 props 名称，导致命名冲突。
Wrapper Hell: 如果嵌套太多的HOC，会导致代码难以阅读和维护，也就是常说的Wrapper Hell。
静态方法丢失： HOC 会创建一个新的组件，导致原始组件的静态方法丢失。需要手动拷贝静态方法。

五、Hooks来了，HOC是不是要凉凉？

自从 React 16.8 引入 Hooks 之后，很多开发者开始用 Hooks 替代 HOC。Hooks 提供了更简洁、更灵活的方式来共享组件逻辑。

Hooks 和 HOC 的主要区别在于：

Hooks 是函数： Hooks 本质上就是 JavaScript 函数，可以在函数组件中使用。
HOC 是组件： HOC 本质上是一个组件，需要包裹其他的组件。

用 Hooks 实现数据加载的例子：

import React, { useState, useEffect } from 'react';

// 自定义 Hook，用于数据加载
function useData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

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

    fetchData();
  }, [url]);

  return { data, loading, error };
}

// 一个展示数据的组件
function UserList() {
  const { data, loading, error } = useData('https://jsonplaceholder.typicode.com/users');

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

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

  if (!data) {
    return <div>No data available.</div>;
  }

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// 在 App 组件中使用 UserList
function App() {
  return <UserList />;
}

可以看出，使用 Hooks 实现数据加载更加简洁，也更容易理解。

六、Hooks的优点，咱也得了解

Hooks 的优点：

代码复用： 可以把通用的逻辑提取出来，在多个组件之间共享。
逻辑清晰： 可以把组件的逻辑拆分成多个小的 Hooks，使代码更加模块化。
更容易追踪： Hooks 的 props 来源更加清晰，避免了 HOC 的 props 来源难以追踪的问题。
避免了 Wrapper Hell： Hooks 不需要包裹其他的组件，避免了 HOC 的 Wrapper Hell 问题。
更好的可读性： Hooks 代码更加简洁，更容易阅读和理解。

七、HOC和Hooks，到底选哪个？

特性	高阶组件 (HOC)	Hooks
本质	函数，接收组件并返回增强后的组件	函数，在函数组件内部使用
代码复用	通过包裹组件共享逻辑	通过自定义 Hooks 共享逻辑
嵌套问题	可能导致 "Wrapper Hell"	避免了 "Wrapper Hell"
Props 冲突	可能发生，需要小心处理	可能性较低，命名更灵活
可读性	复杂嵌套时可读性较差	通常更简洁，可读性更好
静态方法	需要手动拷贝	无此问题
类组件	常用	只能用于函数组件
适用场景	– 传统 React 开发	– 新项目，函数组件为主
	– 需要修改渲染输出的场景	– 需要共享状态逻辑的场景
	– 不修改组件内部状态和行为的场景	– 组件内部需要管理状态和副作用的场景

那到底该选哪个呢？

如果你还在使用类组件，或者需要修改渲染输出，那么 HOC 仍然是一个不错的选择。
如果你的项目已经迁移到函数组件，并且需要共享状态逻辑，那么 Hooks 绝对是首选。
新项目，优先选择 Hooks。

总的来说，Hooks 是 React 发展的趋势，它提供了更简洁、更灵活的方式来共享组件逻辑。但是，HOC 仍然有它的用武之地，在某些特定的场景下，HOC 仍然是更好的选择。

八、总结

今天咱们聊了 JavaScript 的高阶组件，以及它在 React 中的应用。也对比了 HOC 和 Hooks 的优缺点。希望大家对 HOC 有了更深入的了解。记住，技术是死的，人是活的，选择哪个方案，还是要根据具体的业务场景来决定。

好了，今天的讲座就到这里，谢谢大家！散会！

发表回复 取消回复

发表回复取消回复