React 高阶函数 以及应用场景

在React中，高阶函数是一种返回组件的函数，通常用于数据逻辑的封装、状态管理或属性操作。以下是一个高阶函数的例子，它用于为组件添加日志记录功能：

import React, { useEffect, useRef } from 'react';
 
// 高阶函数，用于记录组件的渲染次数
function withLogging(WrappedComponent) {
  return function HOC({ ...props }) {
    useEffect(() => {
      console.log(`Rendering ${WrappedComponent.displayName || WrappedComponent.name}`);
    }, []);
 
    return <WrappedComponent {...props} />;
  };
}
 
// 示例组件
function MyComponent() {
  const renderCount = useRef(0);
  useEffect(() => {
    renderCount.current += 1;
  });
 
  return (
    <div>
      <p>Rendered {renderCount.current} times</p>
    </div>
  );
}
 
// 应用高阶函数
const LoggedMyComponent = withLogging(MyComponent);
 
export default LoggedMyComponent;

在这个例子中，withLogging是一个高阶函数，它接收一个组件WrappedComponent作为参数，并返回一个用于记录渲染次数的组件。这种模式在开发过程中用于调试和性能优化是一个常见的应用场景。