react实践思考——高阶函数如何实现以及作用

定义

高阶函数（Higher-Order Function, HOF）  是指接收一个或多个函数作为参数，或者返回一个函数的函数。高阶函数通常用于封装逻辑、增强功能或实现代码复用。

使用场景

1. 事件处理函数中传递额外参数。
2. 封装通用逻辑（如防抖、节流）。
3. 实现高阶组件（Higher-Order Component, HOC）。

使用案例

事件处理函数中传递额外参数

在 React 中，事件处理函数默认会接收一个事件对象（event）。如果需要传递额外参数，可以使用高阶函数。

 const handleClick = (param) => (event) => {
    console.log("参数:", param);
    console.log("事件:", event);
  };

  return (
    <button onClick={handleClick("Hello")}>
      点击我
    </button>

封装通用逻辑（如防抖、节流）

 const debounce = (func, delay) => {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => func(...args), delay);
    };
  };

实现高阶组件

高阶组件（HOC）是 React 中用于复用组件逻辑的高级技术。它本质上是一个函数，接收一个组件并返回一个新的组件。

import React from 'react';

// 高阶组件：为组件添加加载状态
const withLoading = (WrappedComponent) => {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) {
      return <div>加载中...</div>;
    }
    return <WrappedComponent {...props} />;
  };
};

// 普通组件
const MyComponent = ({ data }) => {
  return <div>数据: {data}</div>;
};

// 使用高阶组件增强 MyComponent
const MyComponentWithLoading = withLoading(MyComponent);

// 使用增强后的组件
function App() {
  const isLoading = true;
  const data = "Hello, World!";

  return (
    <MyComponentWithLoading isLoading={isLoading} data={data} />
  );
}

export default App;

问题以及优化方案

问题：每次渲染都会创建新的实例，导致重新渲染

方法

用 useCallback 或 useMemo封装

 const handleClick = useCallback((param) => (event) => {
    console.log("参数:", param);
    console.log("事件:", event);
  }, []);