序文
Reactを学んでいる学生は、多かれ少なかれ高レベルのコンポーネントについて聞いています。高レベルのコンポーネントを上手に学びたいのであれば、最初に高レベルの関数の操作を学ぶ必要があります。この記事は高レベルの関数から始まり、高レベルの機能と高レベルの機能を学ぶ方法を学びます。ステージコンポーネントの使用
高階関数
高次コンポーネント
JS関数は実際には変数を指します。変数は関数を指すことができ、関数のパラメーターは変数を受け取ることができるため、関数は別の関数をパラメーターとして受け取ることができます。この種の関数は高次関数と呼ばれます。
// 一个最简单的高阶函数
function add(x, y, f) {
return f(x) + f(y)
}
add(-5, 5, Math.abs) // 10
高階関数は少なくとも2つの条件を満たします（1つで十分です）。
1.1つ以上の関数を入力として受け取ります
2.関数を出力します
高階関数の例
最初に小さな例を書いて、ログインとログアウトの関数を定義しましょう。
単純な関数を書くだけです。以下は一般的な書き方であることに注意してください。
function login() {
// usernam一般会从后台接口或者从本地获取
const username = 'admin'
console.log(username + '登录了')
}
function logout() {
const username = 'admin'
console.log(username + '退出了')
}
login()
logout()
2つの関数に同じコードがあることがわかります。constusername='admin'、実際の開発では、同じコードがさらに存在する可能性があるため、これらの冗長なコードを解決する方法を見つける必要があります。
ユーザー名を読み取り、ユーザー名を2つの関数に渡す中間関数を記述して、最適化しましょう。
次のコードのロジックについて説明しましょう。
下部にあるnewLogin=useUserName（login）の定義を参照してください。これは、ログイン関数を呼び出しとしてuseUserNameに渡すのと同じであり、getUserName関数のcall（username）は次のようになります。 login（ユーザー名）。ログアウトは同じです。ここでの呼び出しは渡された関数です。
function useUserName(call) {
// call这里是一个函数
function getUserName() {
const username = 'admin'
call(username)
// login(username)
// logout(username)
}
return getUserName
}
function login(username) {
console.log(username + '登录了')
}
function logout(username) {
console.log(username + '退出了')
}
const newLogin = useUserName(login)
const newLogout = useUserName(logout)
newLogin()
newLogout()
上記のコードのuseUserNameは、ログイン関数を受け取り、高階関数である関数を返します。これは、ユーザー名の処理に役立ち、ユーザー名を取得した後、ここでの呼び出しであるターゲット関数に渡されます。ただし、最後の呼び出しでは、最後のnewLoginとnewLogoutが実行されます。呼び出し元は、ユーザー名の取得元を気にする必要はありません。map / filter / reduce / sort / Arrayのように一般的に見られるのは、高階関数です。主に高階関数の概念を理解するため。
この記事では、高階関数を紹介し、優れた基礎を築き、高階関数の概念を理解しています。次の記事では、高階コンポーネントとその使用法について詳しく説明します。以下のリンクをクリックしてください。反応中高次の素晴らしいコンテンツを表示します。関数と高レベルコンポーネントの使用-（以下）（ケースの詳細ログイン認証と拡張小道具）