การแกงแบบปฏิกิริยาคืออะไร

ใน React Currying เป็นเทคโนโลยีระดับสูงเกี่ยวกับฟังก์ชันต่างๆ มันหมายถึงรูปแบบการเข้ารหัสฟังก์ชันที่ได้รับหลายพารามิเตอร์และสุดท้ายก็ประมวลผลพวกมันอย่างเท่าเทียมกันโดยการส่งคืนฟังก์ชันต่อไป แต่เพียงแค่แปลงฟังก์ชันเท่านั้นที่คุณสามารถทำได้ รับข้อมูลการควบคุมแบบฟอร์มได้อย่างง่ายดายเมื่อประมวลผลแบบฟอร์มผ่านการแกง

สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 10, รีแอคเวอร์ชัน 17.0.1, คอมพิวเตอร์ Dell G3

การแกงแบบปฏิกิริยาคืออะไร

การสลับฟังก์ชัน:

ด้วยการส่งคืนฟังก์ชันผ่านการเรียกฟังก์ชันอย่างต่อเนื่อง ทำให้เกิดรูปแบบการเข้ารหัสฟังก์ชันที่ยอมรับพารามิเตอร์หลายครั้งและสุดท้ายก็ประมวลผลค่าเหล่านั้นอย่างเท่าเทียมกัน

ส่วนขยาย:

ฟังก์ชันลำดับที่สูงกว่า: ถ้าฟังก์ชันตรงตามข้อกำหนดข้อใดข้อหนึ่งต่อไปนี้ ฟังก์ชันนั้นจะเป็นฟังก์ชันที่มีลำดับสูงกว่า

1. หากพารามิเตอร์ที่ฟังก์ชันยอมรับเป็นฟังก์ชัน ฟังก์ชัน a ก็สามารถเรียกได้ว่าเป็นฟังก์ชันที่มีลำดับสูงกว่า

2. หากค่าที่ส่งคืนของฟังก์ชัน a ยังคงเป็นฟังก์ชัน ฟังก์ชัน a ก็สามารถเรียกได้ว่าเป็นฟังก์ชันลำดับที่สูงกว่า

3. ฟังก์ชันลำดับที่สูงกว่าทั่วไป ได้แก่: Promise, setTimeout, arr.map ฯลฯ

ตัวอย่างมีดังนี้

ในแบบฟอร์มแบบฟอร์ม ให้ใช้ส่วนประกอบที่มีการควบคุมเพื่อผูกข้อมูลสถานะเพื่อแสดงข้อมูลแบบฟอร์มเมื่อคลิก:

นำเข้า React, {Component} จาก 'react'; ส่งออกคลาสเริ่มต้น แบบฟอร์มขยายส่วนประกอบ { state = { ชื่อผู้ใช้: '', รหัสผ่าน: '' } sendForm = (เหตุการณ์) => { event.preventDefault() // ป้องกันการส่งแบบฟอร์ม const {ชื่อผู้ใช้, รหัสผ่าน } = this.state; alert(`${userName}, ${password}`) } updateUserName = (event) => { this.setState({ ชื่อผู้ใช้: event.target.value, }) } updatePassword = (เหตุการณ์) => { this.setState({ รหัสผ่าน: event.target.value, }) } render() { return ( <form onSubmit={this.submitForm}> ชื่อผู้ใช้:<input type="text" name = "userName" onChange={this.updateUserName}/> รหัสผ่าน: <input type="password" name="password" onChange={this.updatePassword}/> <button>เข้าสู่ระบบ</button> </form> ) } }

จะเห็นได้ว่าวิธีนี้ยุ่งยากกว่าเมื่อมีไอเท็มแบบฟอร์มจำนวนมาก และฟังก์ชัน Currying สามารถใช้เพื่อเพิ่มประสิทธิภาพได้:

นำเข้า React, {Component} จาก 'react'; ส่งออกคลาสเริ่มต้น แบบฟอร์มขยายส่วนประกอบ { state = { ชื่อผู้ใช้: '', รหัสผ่าน: '' } sendForm = (เหตุการณ์) => { event.preventDefault() // ป้องกันการส่งแบบฟอร์ม const {ชื่อผู้ใช้, รหัสผ่าน } = this.state; alert(`${userName}, ${password}`) } updateFormData = (key) => { return (event) => { this.setState({ [key]: event .target.value, }) } } render() { return ( <form onSubmit={this.submitForm}> ชื่อผู้ใช้:<input type="text" name="userName" onChange={this.updateFormData('userName' ) }/> รหัสผ่าน: <input type="password" name="password" onChange={this.updateFormData('password')}/> <button>เข้าสู่ระบบ</button> </form> ) }}

ค่าที่ส่งคืนของ this.updateFormData() คือฟังก์ชันเรียกกลับ ซึ่งเชื่อมโยงกับเหตุการณ์ onChange และพารามิเตอร์คือเหตุการณ์ ด้วยวิธีนี้ สามารถส่งประเภทได้เมื่อมีการเรียกครั้งแรก และส่งค่าได้เมื่อมีการทริกเกอร์เหตุการณ์การเปลี่ยนแปลง

การนำไปใช้โดยไม่มีฟังก์ชันการแกง

การเชื่อมโยงเหตุการณ์ onChange โดยตรงเป็นการเรียกกลับทำให้คุณสามารถส่งพารามิเตอร์ทั้งประเภทและค่าได้ในเวลาเดียวกัน

นำเข้า React, {Component} จาก 'react'; ส่งออกคลาสเริ่มต้น แบบฟอร์มขยายส่วนประกอบ { state = { ชื่อผู้ใช้: '', รหัสผ่าน: '' } sendForm = (เหตุการณ์) => { event.preventDefault() // ป้องกันการส่งแบบฟอร์ม const {ชื่อผู้ใช้, รหัสผ่าน } = this.state; alert(`${userName}, ${password}`) } updateFormData = (key, event) => { this.setState({ [key]: event.target.value, }) } render() { return ( <form onSubmit={this.submitForm}> ชื่อผู้ใช้:<input type="text" name="userName" onChange={(event) => this.updateFormData('userName', event )}/> รหัสผ่าน: <input type="password" name="password" onChange={(event) => this.updateFormData('password', event)}/> <button>Login</button> </ form > ) }}