[28] React HOC vs HOF

2265 ワード
テキストリンク

HOC (Higer order Component)


親コンポーネント.
ログインしていないユーザーがログインしなければ表示できないページにアクセスしたい場合は、「ログインしてください」とログインウィンドウで送信されたページで処理すると仮定すると、1つずつコードを付けることはできません.HOCを使ってこれらの問題を解決することができます.
HOCを作成し、ログインするコンポーネントの前にHOCを付けるだけで、簡単にパーミッション処理を完了できます.
HOCはデータを損失のない方法で伝送することができ,モジュール関数の特徴を利用した.event.target.関数が渡すインデックス値をidなどではなく直接渡すことができます.したがって,idの乱用を回避して誤りを防止することができる.

HOF (Higer order Fuction)


高次関数とは、関数をパラメータまたは戻り関数として受け入れることによって動作する関数です.簡単に言えば、高次関数とは、関数をパラメータまたは関数を出力戻り関数とする関数を指す.HOFを使用すると、より柔軟で重複を減らすコードを作成できます.
例
非高次関数として作成
const arr1 = [1, 2, 3]
const arr2 = [];

for(let i = 0; i <arr1.length; i++){
	arr2.push(arr1[i] * 2);
}
console.log(arr2) //prints[2, 4, 6]
高次関数の作成
const arr1 = [1,2,3]

const arr2 = arr1.map(function(el){
	return el*2
})

console.log(arr2)
// [2,4,6]
矢印関数を使用すると、より短いコンテンツを作成できます.
const arr1 = [1,2,3]
const arr2 = arr1.map(el => el * 2);
console.log(arr2)
// [2,4,6]
リファレンス
https://intrepidgeeks.com/tutorial/hofhoc
https://ko.reactjs.org/docs/higher-order-components.html
https://velog.io/@jakeseo_me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-33%EA%B0%80%EC%A7%80-%EA%B0%9C%EB%85%90-22-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B3%A0%EC%B0%A8-%ED%95%A8%EC%88%98Higher-Order-Function-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0
TIL. React. <22.04.16>
水平(1152)[文字列]