高阶组件从哪来，到哪去，它去了又来

2023-09-17 15:59:26

高阶函数

在介绍高阶组件之前，我们先来了解一下高阶函数的概念。高阶函数是指可以接收函数作为参数，或者返回函数作为结果的函数。在JavaScript中，函数是一等公民，这意味着我们可以像使用其他数据类型一样使用函数。例如，我们可以将函数作为参数传递给另一个函数，或者将函数存储在变量中。

高阶函数的一个常见例子是数组的forEach方法。forEach方法接收一个函数作为参数，并对数组中的每个元素调用该函数。例如，以下代码使用forEach方法来将数组中的每个元素乘以2：

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
  console.log(number * 2);
});

输出：

高阶组件

高阶组件与高阶函数非常相似，不同之处在于高阶组件接收组件作为参数，并返回一个新的组件。新的组件继承了原组件的属性和方法，并可能添加一些额外的功能。

高阶组件的一个常见例子是withRouter组件。withRouter组件接收一个组件作为参数，并返回一个新的组件，该组件具有路由相关的信息，例如当前的路径和参数。例如，以下代码使用withRouter组件来获取当前的路径：

import { withRouter } from 'react-router-dom';

const MyComponent = (props) => {
  const { location } = props;
  console.log(location.pathname);

  return (
    <div>
      <h1>Current path: {location.pathname}</h1>
    </div>
  );
};

export default withRouter(MyComponent);