(React)-高次関数、トリム-トリム技術

高次関数(Highter Order Function)とトリミング(Currying)技術とは?
この2つの概念は反応器で非常に多く使われている.
高次関数とは、関数をパラメータとして渡したり、返したりする関数です.

*カードリング

「トリム」(Curing)テクノロジーは、複数のパラメータを関数の特定のパラメータに固定する新しい関数を作成します.
1つの方法は、パラメータnをn個に分割して使用することである.
これらを先に知って、詳しい内容はゆっくり説明します.

高次関数

前述したように、高次関数とは、関数をパラメータとして渡したり、戻り値として返したりする関数です.
高次関数は、特定の論理を容易に繰り返し使用するために、応答において高次素子としてよく使用される.

const sayHello = function () {  #1
    console.log("Hello");
};

const func1 = function (func) { #2
    function innerFunc(word) {
        func();                 #3
        console.log(word);#4
    }
    return innerFunc;           #5
};

const worldHello = func1(sayHello); #6
worldHello("world");                #7
// Hello
// world 출력

単純な例では、高次関数のすべての特徴が表示されます.
#1.まず、高次関数のパラメータとして関数を宣言します.この関数はconsoleにのみ使用されます.Helloをlogで出力します.
#2.高次関数func 1が宣言されました.パラメータはfuncという関数を受信し、内部に関数があります.次に、内部関数を返します.
#3.func 1の内部関数innerFuncで、パラメータとして受信したfunc関数を実行します.
#4.その後はconsole.innerFuncパラメータとして受信したwordをlogで出力します.このプロシージャは、パラメータ形式で受信された最初のfunc関数に新しい論理を追加します.
#5.innerFuncに戻ることで高次関数を使用可能にします.このinnerFuncはfuncをモジュールとします.
#6.worldHelloという定数に関数を割り当てます.この値はsayHelloをパラメータとしてfunc 1に渡した結果である.
#7.wolrdHelloパラメータを使用してworldという文字列を渡します.この文字列は先ほど見たinnerFuncのwordパラメータとして使用されます.
.

const func1 = (func) => (word) => {
		func();
		console.log(`${word}`);
};

上に示すfunc 1の矢印関数バージョン.動作はさっきと同じですが、読みやすさがいいようです.

カレー技術

前述したように、「トリム」(Currying)メソッドは、複数のパラメータを固定する新しい関数を作成する方法です.
私が何を言っているのか分からないかもしれませんが、コードでチェックしてみましょう.

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

2つのパラメータ:wordとnameを受信して出力する簡単な形式の関数です.
この関数にcurringを適用しましょう.

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

const printHello = helloFunc("hello"); 
printHello("Tibetan Fox"); // hello, Tibetan Fox
printHello("Tiger");       // hello, Tiger

さっきの関数にcurringを適用すると、こうなります.
n(2)個のパラメータを受信する関数がn(2)個で中断されることがわかる.
また、最初に受信したパラメータwordをhelloに固定し、名前を変更するだけで可用性を表示することもできます.
これは、あるパラメータに対して同じ値を繰り返し使用する場合、繰り返しパラメータを固定することによって、繰り返し性を最小限に抑えることができることを意味する.

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}`)
			}
		}
	}
}

本当に変態になったトリム(Trim)メソッド自体が、一部または一部の関数をチェーンとして作成して使用する方法であるため、このような変態にならざるを得ないようです.

const printHello = helloFunc("hello")("Tibetan Fox")("Good morning");
printHello("Tiger"); // hello, Tibetan Fox || Good morning, Tiger 출력
printHello("Ant"); // hello , Tibetan Fox || Good morning, Ant 출력

幸いなことに、使うのは難しくありません.上記のように、3つのパラメータをギャップによって固定することができ、最後のパラメータのみが使用可能である.

const printHello = helloFunc("hello")("Tibetan Fox")("Good morning")("Tiger") ; // 직접 호출

const printHello = helloFunc("hello")("Tibetan Fox") ; // 두개의 인자만 고정

printHello("Good morning")("Tiger") ;
printHello ("Good evening")("Crow") ; 

もちろん、パラメータを直接呼び出したり増減したりすることもできます.

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

ちなみに、上記の矢印関数を使用して、それほど変態に見えないようにすることができます.
注意事項
[トリム](Trim)メソッドを適用する場合、パラメータの順序は非常に重要です.小さい可変パラメータは前に、大きい可変パラメータは後ろに置くべきです.この点を考慮してカードリングを使用する必要があります.