高階組件和高階函數(shù)都是在函數(shù)式編程中常見的概念。

高階組件（Higher-Order Component, HOC）是一種函數(shù)，接受一個(gè)組件作為參數(shù)，并返回一個(gè)新的組件。它可以用來(lái)增強(qiáng)現(xiàn)有的組件，給它添加額外的功能或?qū)傩?。高階組件在React中被廣泛使用，可以用來(lái)實(shí)現(xiàn)代碼的復(fù)用、邏輯的封裝以及狀態(tài)的管理等功能。

以下是一個(gè)使用高階組件的示例代碼：

function withLogger(WrappedComponent) {return class WithLogger extends React.Component {componentDidMount() {console.log('Component has mounted');}render() {return <WrappedComponent {...this.props} />;}}
}class MyComponent extends React.Component {render() {return <div>Hello, World!</div>;}
}const EnhancedComponent = withLogger(MyComponent);

上述代碼中，withLogger是一個(gè)高階組件，它接受一個(gè)組件 WrappedComponent 作為參數(shù)，并返回一個(gè)新的組件 WithLogger。WithLogger 組件在 componentDidMount 方法中加入了日志輸出的邏輯，并將 props 傳遞給了 WrappedComponent。

高階函數(shù)（Higher-Order Function, HOF）是指接受一個(gè)函數(shù)作為參數(shù)，并返回一個(gè)新的函數(shù)的函數(shù)。高階函數(shù)可以用來(lái)實(shí)現(xiàn)函數(shù)的復(fù)用、邏輯的封裝以及增強(qiáng)函數(shù)的功能等。

以下是一個(gè)使用高階函數(shù)的示例代碼：

function loggerDecorator(fn) {return function(...args) {console.log('Calling function with arguments:', ...args);const result = fn(...args);console.log('Function result:', result);return result;};
}function add(a, b) {return a + b;
}const enhancedAdd = loggerDecorator(add);
const sum = enhancedAdd(1, 2); // Output: "Calling function with arguments: 1 2", "Function result: 3"

上述代碼中，loggerDecorator 是一個(gè)高階函數(shù)，它接受一個(gè)函數(shù) fn 作為參數(shù)，并返回一個(gè)新的函數(shù)。返回的函數(shù)在調(diào)用時(shí)會(huì)輸出函數(shù)的參數(shù)和返回值，并調(diào)用原函數(shù) fn。

總結(jié)：高階組件和高階函數(shù)都是在函數(shù)式編程中用來(lái)增強(qiáng)代碼的概念。高階組件用于增強(qiáng)組件，高階函數(shù)用于增強(qiáng)函數(shù)。它們可以幫助我們實(shí)現(xiàn)代碼的復(fù)用、邏輯的封裝以及功能的增強(qiáng)。