Fungsi pesanan tinggi: apa sebenarnya, dan contoh React

Siri Tech Jargon

Terdapat begitu banyak ungkapan yang dilontarkan pada perjumpaan dan persidangan berteknologi, dengan anggapan bahawa semua orang sudah tidak senang. Saya sering tidak terganggu dengan bahasa. Adalah biasa bagi pembangun untuk bertindak hairan kerana saya tidak mempunyai sedikit pengetahuan.

Sebenarnya, saya sering tidak tahu perkataan yang tepat untuknya. Sebagai manusia, tetapi terutama manusia pemaju, kami suka menolak mereka yang tidak "membicarakan", jadi siri ini adalah untuk mendapatkan pemahaman yang kuat tentang konsep pengaturcaraan yang "harus diketahui".

Topik pertama saya untuk siri ini adalah Fungsi Tertinggi Lebih Tinggi. Saya berada di perjumpaan teknologi pada suatu hari, dan kami membincangkan mengenai React dan betapa sukarnya bagi pemula React untuk memasukkan kod tersebut. Saya menyebutkan bahawa komponen pesanan tinggi (HOC) sukar difahami. Maklum balas adalah bahawa mereka seperti fungsi pesanan tinggi, tidakkah saya setuju? Dan saya berkata: "Saya tidak tahu apa itu." Ketika saya meminta contoh, saya diberitahu "peta". Saya membuat lelucon tentang bagaimana saya tidak tahu apa itu "peta" dan kami terus maju.

Tetapi masih: apakah fungsi pesanan tinggi?

(Catatan: semua contoh yang diberikan terdapat dalam Javascript, tetapi konsep ini berlaku untuk setiap bahasa pengaturcaraan.)

Fungsi pesanan tinggi: definisi

Fungsi orde tinggi adalah fungsi yang a) mengambil fungsi sebagai argumen atau b) mengembalikan fungsi.

Sekiranya fungsi tidak melakukan perkara tersebut, ia adalah fungsi pesanan pertama .

Peta

Mari kita mulakan dengan contoh yang saya diberi : map.

[1, 2, 3].map(num => num * 2)> [2, 4, 6]

Yang mapfungsi dipanggil pada array dan mengambil fungsi "panggil balik". Ini menerapkan fungsi untuk setiap item dalam array, mengembalikan array baru. [1, 2, 3]adalah array kami dan num => num * 2 adalah fungsi kami. Panggilan balik adalah argumen fungsi yang diteruskan ke fungsi pesanan tinggi kami.

HOF ini dimasukkan ke dalam bahasa, dilindungi prototaip pada Array ( Array.prototype.map).

Contoh-contoh lain HOFs diprototaip pada Array adalah filter, reduce, dan some.

Contoh tersuai

Oleh itu mari kita tulis fungsi pesanan tinggi kita sendiri.

Fungsi lulus

const myFunc = age => age * 2

Fungsi pesanan tinggi

Sekarang kita menulis fungsi yang memerlukan fungsi.

const hof = (customFunc, age) => customFunc(age + 5) 

Kami akan memberikan nombor ke hof, yang akan menambah 5 dan kemudian memanggil fungsi lulus kami, yang akan menggandakannya. Sekiranya kita lulus 10, kita lulus 15 ke fungsi pertama kita, yang kemudian menjadi dua kali ganda menjadi 30.

Contoh tersuai dengan "komponen" React

Seperti yang saya nyatakan di atas, topik ini muncul merujuk kepada komponen React. Sebagai komponen React adalah fungsi, ketika meneruskannya ke fungsi lain, kita membuat fungsi pesanan tinggi kita sendiri, yang React memanggil "komponen pesanan tinggi". Sekiranya anda menggunakan komponen yang bernas (dan memperluas React's Component), anda sudah menggunakan HOC.

Komponen Tanpa Statistik

const details = ({ name, randomNum }) => `${name}, ${randomNum}`

Kita mempunyai fungsi, dipanggil details, yang kita lalui props. Kami mendekonstruksi mereka semasa mereka masuk dan memberikannya kepada pemboleh ubah tempatan namedan randomNum. Ini adalah sintaks ES6 - jika kelihatan tidak dikenali, berikan google (anda pasti menyukainya).

Ini adalah fungsi pesanan pertama - ia memerlukan satu argumen ( propsobjek) dan mengembalikan templat literal.

Komponen bertaraf tinggi

const hoc = (component, props) => { const randomNum = Math.floor(Math.random() * 100) return component({ ...props, randomNum }) }

Ini adalah fungsi perintah yang lebih tinggi - ia memerlukan fungsi (yang component, kemudian dipanggil, meneruskan alat tambahan). Ini adalah contoh yang sangat asas dari apa yang dilakukan oleh setiap komponen React tanpa status.

Anda boleh menggunakan corak ini ke abstrak kod yang dikongsi di antara banyak komponen dalam aplikasi anda.

Adakah anda tertanya-tanya adakah anda boleh menggunakan fungsi pesanan tinggi? Awak boleh! Tetapi sila berhati-hati. Abstraksi harus menjadikan kod lebih mudah dibaca dan digunakan . Sangat mudah untuk mendapatkan jalan di sini di mana kod anda begitu tidak jelas dan tidak ada yang dapat mengetahui bagaimana melakukan sesuatu.

Rujukan

  • Fungsi pesanan tinggi, Wikipedia
  • Fungsi pesanan tinggi, Javascript Eloquent (bab 5)
  • Array.prototype Dokumen MDN.