JS 高阶函数（Higher Order Function / HOF）

什么是高阶函数？

在JavaScript中，高阶函数是一种功能强大且灵活的函数。它们可以接受其他函数作为参数，也可以返回函数作为结果。高阶函数使得代码更加模块化和可复用，是函数式编程的重要特性之一。

HOF 的特点

• 接受函数作为参数
• 返回函数作为结果

示例代码

// 高阶函数：将函数作为参数传入
function doTwice(func) {
  return function(num) {
    func(num);
    func(num);
  }
}

// 普通函数：打印数字的平方
function printSquare(num) {
  console.log(num * num);
}

// 调用高阶函数
const doTwiceSquare = doTwice(printSquare);

// 调用返回的函数并执行
doTwiceSquare(5); // 输出：25 25

高阶函数的应用场景

1. 回调函数：将函数作为参数传递给异步操作的回调函数
2. 函数串联：将多个函数组合为一个函数进行执行
3. 对数组进行操作：如 map、filter、reduce 等
4. 函数的柯里化：将一个多参数的函数转换为多个单参数函数的组合

JS 高阶组件（Higher Order Component / HOC）

什么是高阶组件？

高阶组件是一种函数，它接收一个组件作为参数，并返回一个新的组件。高阶组件通过包装现有组件以添加新的功能或修改其行为，提高组件复用性，实现代码的解耦和功能的复用。

HOC 的特点

• 接受组件作为参数
• 返回新组件

示例代码

// 高阶组件：为传入的组件增加点击事件处理
function withClickHandling(WrappedComponent) {
  return class extends React.Component {
    handleClick() {
      console.log('Clicked!');
    }

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

// 普通组件
class Button extends React.Component {
  render() {
    return <button onClick={this.props.onClick}>{this.props.label}</button>;
  }
}

// 使用高阶组件包装 Button 组件
const ButtonWithClickHandling = withClickHandling(Button);

// 渲染新组件
ReactDOM.render(<ButtonWithClickHandling label="Click Me" />, document.getElementById('root'));

高阶组件的应用场景

1. 权限控制：根据用户权限动态添加或移除组件的功能
2. 数据获取和处理：将共享的数据逻辑和状态管理移到高阶组件中
3. UI 组合：将多个组件组合为一个高阶组件，并复用其功能

通过高阶函数（HOF）和高阶组件（HOC），我们可以更好地组织、复用和解耦代码，提高代码的可维护性和可拓展性。这两个概念在现代的 JavaScript 和 React 开发中被广泛应用，希望本文能帮助读者理解和运用它们。

本文来自极简博客，作者：魔法少女，转载请注明原文链接：JS 高阶函数（Higher Order Function / HOF）