当前位置：首页 > React

react高阶函数如何写

2026-01-25 07:07:59React

高阶函数的基本概念

高阶函数（Higher-Order Function）是指接收函数作为参数或返回函数的函数。在React中，高阶函数常用于逻辑复用、组件增强或事件处理封装。

接收函数作为参数的高阶函数

通过将函数作为参数传递，可以实现逻辑的动态扩展。例如，封装一个通用的数据处理函数：

function withDataProcessing(Component, processData) {
  return function(props) {
    const processedData = processData(props.data);
    return <Component {...props} data={processedData} />;
  };
}

// 使用示例
const processUserData = (data) => data.filter(user => user.isActive);
const EnhancedUserList = withDataProcessing(UserList, processUserData);

返回函数的高阶函数

常见于事件处理或柯里化场景。例如，创建一个延迟执行的函数：

function withDelay(callback, delay) {
  return function(...args) {
    setTimeout(() => callback(...args), delay);
  };
}

// 使用示例
const delayedLog = withDelay(console.log, 1000);
delayedLog("Delayed message"); // 1秒后输出

高阶组件（HOC）的实现

高阶组件是React中高阶函数的典型应用，用于增强组件功能：

function withLogger(WrappedComponent) {
  return function(props) {
    console.log("Rendered:", WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}

// 使用示例
const LoggedButton = withLogger(Button);

自定义Hook中的高阶函数

通过自定义Hook封装可复用的逻辑，例如表单处理：

function useFormHandler(initialState, onSubmit) {
  const [values, setValues] = useState(initialState);

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

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(values);
  };

  return { values, handleChange, handleSubmit };
}

// 使用示例
const { values, handleChange, handleSubmit } = useFormHandler(
  { email: "", password: "" },
  (data) => console.log(data)
);