React Currying

12648 ワード

React HoC HoF TIL テキストリンク

1.Currying(カードリング)技術

シリアルメソッドは、複数のパラメータを関数のいくつかのパラメータに固定する新しい関数作成方法です.
それを理解するためには、HOC、HOFとは何かを知る必要があります.
HOC、HOFについての記事
次のコードを見てください

function helloFunc(word, name) {
    console.log(`${word}, ${name}`);
}

これは、wordとnameの2つのパラメータ出力を受け入れる関数です.
この関数にcurringを適用してみましょう.

function helloFunc(word) {
    return function (name) {
        console.log(`${word}, ${name}`);
    };
}

const printHello = helloFunc("안녕"); 
printHello("멍멍이");  // 안녕, 멍멍이
printHello("야옹이");  // 안녕, 야옹이

2つのパラメータを受信する関数
1つの因子を受け入れる2つの関数に分裂していることがわかります.
最初のパラメータwordも「さようなら」に固定されている.
パラメータとしてnameのみが使用されていることがわかります.
同様に、いくつかのパラメータが同じ値を繰り返し使用する場合、トリム方法
これは,その値を固定することによって繰返しを最小化する方法である.
より深い例を見てみましょう.

function helloFunc(word, name, word2, name2) {
    console.log(`${word}, ${name} || ${word2}, ${name2}`);
}

上記の関数は4つの因子を受け入れます.
ここでカードリングを適用します.

function helloFunc(word) {
    return function (name) {
        return function(word2){
            return function(name2){
                console.log(`${word}, ${name} || ${word2}, ${name2}`)
            }
        }
    };
}

const printHello = helloFunc("안녕")("댕댕이")("좋은 아침!");
printHello("잘가"); // 안녕, 댕댕이 || 좋은 아침!, 잘가 출력
printHello("놀자");   // 안녕, 댕댕이 || 좋은 아침!, 놀자 출력

次の矢印関数を使用すると、より読みやすさが向上します.

const helloFunc = (word) => (name) => (word2) => (name2) => {
    console.log(`${word}, ${name} || ${word2}, ${name2}`);
};

const printHello = helloFunc("안녕")("댕댕이")("좋은 아침!");
printHello("잘가"); // 안녕, 댕댕이 || 좋은 아침!, 잘가 출력
printHello("놀자");   // 안녕, 댕댕이 || 좋은 아침!, 놀자 출력

会計テクニックを適用する場合、因子の順序は非常に重要です.
上端に位置する因子を固定します.
繰り返し使用頻度が高いほど、上部の
低い値ほど下にパラメータを配置する必要があります.

Reference

この問題について(React Currying), 我々は、より多くの情報をここで見つけました https://velog.io/@kingmo/React-Currying

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

単品モードThe Singleton Pattern

BJ 14502研究所