ใน React คำจำกัดความของฟังก์ชันลำดับที่สูงกว่าคือ หากพารามิเตอร์ที่ได้รับจากฟังก์ชันที่ระบุเป็นฟังก์ชันอื่น หรือค่าที่ส่งคืนของการเรียกยังคงเป็นฟังก์ชัน ฟังก์ชันที่ระบุจะเรียกว่าฟังก์ชันลำดับที่สูงกว่าทั่วไปที่สูงกว่า -ฟังก์ชั่นการสั่งซื้อ มี Promise, setTimeout, "arr.map()" และอื่นๆ
สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 10, รีแอคเวอร์ชัน 17.0.1, คอมพิวเตอร์ Dell G3
ฟังก์ชันลำดับที่สูงกว่า: หากฟังก์ชันตรงตามข้อกำหนดข้อใดข้อหนึ่งต่อไปนี้ ฟังก์ชันนั้นจะเป็นฟังก์ชันที่มีลำดับสูงกว่า
1. หากพารามิเตอร์ที่ได้รับจากฟังก์ชัน A เป็นฟังก์ชัน ดังนั้น A ก็สามารถเรียกได้ว่าเป็นฟังก์ชันที่มีลำดับสูงกว่า
2. หากค่าที่ส่งกลับของฟังก์ชัน A ยังคงเป็นฟังก์ชัน ดังนั้น A ก็สามารถเรียกได้ว่าเป็นฟังก์ชันลำดับที่สูงกว่า
ฟังก์ชันลำดับสูงกว่าทั่วไป ได้แก่: Promise, setTimeout, arr.map() ฯลฯ
ตัวอย่างมีดังนี้:
กรณีต่อไปนี้เป็นฟังก์ชันที่มีลำดับสูงกว่า
saveFormData = (เหตุการณ์)=>{return ()=>{console.log('@');}}<form onSubmit={this.handleSubmit}>ชื่อผู้ใช้:<input onChange={this.saveFormData('username' ) } type="text" name="username"/>รหัสผ่าน: <input onChange={this.saveFormData('password')} type="password" name="password"/><button>เข้าสู่ระบบ</button> < /แบบฟอร์ม>ก. this.saveFormData('username') ใช้ค่าที่ส่งคืนของ saveFormData เป็นการเรียกกลับของ onChange ไม่ใช่ saveFormData เป็นการเรียกกลับ
ข. หากคุณใช้ this.saveFormData('username') ฟังก์ชันการกำหนด saveFormData จะต้องส่งคืนบางสิ่งไปที่ onChange
ค. ดังนั้นเราจึงพิมพ์สัญลักษณ์ '@' ในฟังก์ชัน return ของ saveFormData จากนั้นค่าที่พิมพ์จะถูกส่งกลับไปยัง onChange และสัญลักษณ์ @ จะถูกพิมพ์ขณะป้อนลงในช่องป้อนข้อมูล
d. dataType ที่ส่งผ่านโดย saveFormData คือชื่อผู้ใช้และรหัสผ่านจริงๆ
จ. สิ่งที่เราเรียกเมื่ออินพุตจะต้องเป็นฟังก์ชัน return การโต้ตอบกลับช่วยให้ฉันส่งผ่านเหตุการณ์ได้เมื่อโทรกลับ เราจะได้รับค่าที่เราส่งออกไป
saveFormData = (dataType)=>{// console.log(dataType);return (เหตุการณ์)=>{// console.log('@');console.log(dataType,event.target.value);}}
ฉ. เนื้อหาสามารถส่งออกได้ เราสามารถใช้ setState เพื่อบันทึกลงในสถานะ
this.setState({[dataType]:event.target.value})