函数式编程是一种编程范式，它强调将计算过程看作是一系列函数的组合。高阶组件（Higher-Order Component，以下简称HOC）是React中常用的一种模式，用于增强组件的功能。下面列举了10个常用的HOC实例：

1. withWidth：根据窗口宽度调整组件的渲染效果和布局。

2. withRouter：将路由参数注入组件，使组件可以直接获取到路由的相关信息。

3. withStyles：将CSS样式注入组件，使组件可以自动应用指定的样式。

4. withTheme：将主题颜色及其他样式参数注入组件，使组件可以根据主题自动应用样式。

5. connect：将Redux的store或dispatch方法注入组件，使组件可以连接到Redux的状态管理机制。

6. memo：将组件的渲染结果缓存起来，在组件输入不变的情况下直接返回缓存的结果，提高性能。

7. lifecycle：用于增强组件的生命周期方法，例如在组件挂载前后执行特定的操作。

8. debounce：用于防抖动操作，延迟执行某个操作，以减少频繁触发的事件。

9. throttle：用于节流操作，限制某个操作的执行频率，在一定时间内只执行一次。

10. compose：用于将多个HOC组合到一起，以形成更复杂的功能。

1. withFormik: 一个用于处理表单逻辑的高阶组件，它通过将表单的状态和事件处理函数作为props传递给包装组件，简化了表单的开发和管理。

2. withRouter: 一个用于将路由信息注入到组件中的高阶组件，它将路由的match、location和history对象作为props传递给包装组件，使得包装组件可以在不是路由组件的情况下访问和修改路由信息。

3. connect: 一个用于连接组件和Redux store的高阶组件，它通过将store中的state和dispatch函数作为props传递给包装组件，使得包装组件可以访问和修改store中的数据。

4. withAuth: 一个用于验证用户身份的高阶组件，它通过检查用户是否登录，并将登录状态和相关的身份验证操作作为props传递给包装组件，限制只允许登录用户访问特定的页面或执行特定的操作。

5. withErrorHandling: 一个用于处理错误的高阶组件，它通过捕获包装组件内部抛出的异常，并将错误信息作为props传递给错误处理组件，从而提供了在应用程序中集中处理和显示错误的能力。

这些HOC在实际开发中经常被使用，它们可以大大提高组件的可复用性和扩展性，使代码更加简洁和易于维护。

函数式编程是一种编程范式，其中函数被视为第一等公民，可以被传递和操作。高阶组件（Higher-Order Component，简称HOC）是函数式编程中的一种模式，用于增强组件的功能和复用性。下面是10个常用的HOC示例：

1. withLoading - 在数据加载期间显示加载动画的HOC

const withLoading = (Component) => (props) => {const [isLoading, setLoading] = useState(true);useEffect(() => {// 模拟数据加载setTimeout(() => {setLoading(false);}, 2000);}, []);return isLoading ? <LoadingSpinner /> : <Component {...props} />;
};
const MyComponent = () => {// ...
}
export default withLoading(MyComponent);

2. withAuthentication - 验证用户身份并在未登录时重定向到登录页面的HOC

const withAuthentication = (Component) => (props) => {const [isAuthenticated, setAuthenticated] = useState(false);useEffect(() => {// 模拟验证用户身份const isAuthenticated = checkAuthentication();setAuthenticated(isAuthenticated);}, []);return isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />;
};
const MyComponent = () => {// ...
}
export default withAuthentication(MyComponent);

3. withState - 添加状态管理能力的HOC

const withState = (Component) => (props) => {const [count, setCount] = useState(0);const increment = () => {setCount(count + 1);};return <Component count={count} increment={increment} {...props} />;
};
const MyComponent = ({ count, increment }) => {// ...
}
export default withState(MyComponent);

4. withRouter - 为组件提供路由相关的props的HOC

const withRouter = (Component) => (props) => {// 获取当前路由信息const location = useLocation();const history = useHistory();const match = useRouteMatch();return <Component location={location} history={history} match={match} {...props} />;
};
const MyComponent = ({ location, history, match }) => {// ...
}
export default withRouter(MyComponent);

5. withPermissions - 根据用户权限显示/隐藏特定功能的HOC

const withPermissions = (Component) => (props) => {const [hasPermission, setPermission] = useState(false);useEffect(() => {// 模拟权限验证const hasPermission = checkPermissions();setPermission(hasPermission);}, []);return hasPermission ? <Component {...props} /> : null;
};
const MyComponent = () => {// ...
}
export default withPermissions(MyComponent);

6. withErrorHandling - 在组件发生错误时显示错误提示的HOC

const withErrorHandling = (Component) => (props) => {const [error, setError] = useState(null);const handleError = (err) => {setError(err);};return error ? <ErrorMessage error={error} /> : <Component handleError={handleError} {...props} />;
};
const MyComponent = ({ handleError }) => {// ...
}
export default withErrorHandling(MyComponent);

7. withTheme - 将主题变量传递给组件的HOC

const withTheme = (Component) => (props) => {const theme = useTheme();return <Component theme={theme} {...props} />;
};
const MyComponent = ({ theme }) => {// ...
}
export default withTheme(MyComponent);

8. withCache - 缓存组件数据的HOC

const withCache = (Component) => (props) => {const [data, setData] = useState(null);useEffect(() => {// 检查缓存const cachedData = checkCache();if (cachedData) {setData(cachedData);} else {// 请求数据并缓存fetchData().then((data) => {setData(data);cacheData(data);});}}, []);return data ? <Component data={data} {...props} /> : <LoadingSpinner />;
};
const MyComponent = ({ data }) => {// ...
}
export default withCache(MyComponent);

9. withLogger - 组件渲染过程中打印日志的HOC

const withLogger = (Component) => {return class WithLogger extends React.Component {componentDidMount() {console.log(`Component ${Component.name} mounted`);}componentDidUpdate() {console.log(`Component ${Component.name} updated`);}componentWillUnmount() {console.log(`Component ${Component.name} unmounted`);}render() {return <Component {...this.props} />;}};
};
class MyComponent extends React.Component {// ...
}
export default withLogger(MyComponent);

10. withLocalStorage - 使用本地存储持久化组件数据的HOC

const withLocalStorage = (Component) => (props) => {const [data, setData] = useState(localStorage.getItem('data') || '');const handleChange = (e) => {const value = e.target.value;setData(value);localStorage.setItem('data', value);};return <Component data={data} handleChange={handleChange} {...props} />;
};
const MyComponent = ({ data, handleChange }) => {// ...
}
export default withLocalStorage(MyComponent);

这些是React中常见的HOC示例，它们可以根据需要进行修改和扩展，以满足不同的业务需求。