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 中国語 Web サイトの他の関連記事を参照してください。