了解 JavaScript 中的高階元件和高階函​​數

高階函數

高階函數是一個函數，它要麼接受另一個函數作為參數，要麼返回一個函數作為結果。這個概念是函數式程式設計的基礎，並允許強大的抽象化。

範例：

function greet(name) {
    return `Hello, ${name}!`;
}

function sayHello(fn, name) {
    return fn(name);
}

console.log(sayHello(greet, 'Alice')); // Output: Hello, Alice!

在此範例中，sayHello 是一個高階函數，因為它接受另一個函數 (greet) 作為參數。

高階組件 (HOC)

在 React 中，高階元件 是一種用來增強現有元件的模式。 HOC 是一個函數，它接受一個元件並傳回一個新元件，通常帶有附加的 props 或行為。

範例：

import React from 'react';

function withGreeting(WrappedComponent) {
    return function EnhancedComponent(props) {
        return (
            <div>
                <h1>Welcome!</h1>
                <WrappedComponent {...props} />
            </div>
        );
    };
}

const MyComponent = ({ name }) => <p>My name is {name}.</p>;

const EnhancedMyComponent = withGreeting(MyComponent);

// Usage in a React app
// <EnhancedMyComponent name="Alice" />

在此範例中，withGreeting 是一個高階元件，它在渲染原始元件之前加入問候語。

重點

• 高階函數：將其他函數作為參數或傳回它們的函數。
• 高階元件：透過包裝元件來重複使用元件邏輯的 React 模式。

以上是了解 JavaScript 中的高階元件和高階函​​數的詳細內容。更多資訊請關注PHP中文網其他相關文章！