ما هو رد فعل الكاري

في React، يعد Currying تقنية عالية المستوى فيما يتعلق بالوظائف، ويشير إلى نموذج ترميز الوظيفة الذي يستقبل معلمات متعددة ويعالجها أخيرًا بشكل موحد من خلال الاستمرار في إرجاع الوظائف يمكنك بسهولة الحصول على بيانات التحكم في النموذج عند معالجة النماذج من خلال الكاري.

بيئة تشغيل هذا البرنامج التعليمي: نظام Windows 10، إصدار التفاعل 17.0.1، كمبيوتر Dell G3.

ما هو رد فعل الكاري

الكاري من الوظائف:

من خلال الاستمرار في إرجاع الوظائف من خلال استدعاءات الوظائف، يتم تحقيق نموذج ترميز الوظيفة الذي يقبل المعلمات عدة مرات ويعالجها في النهاية بشكل موحد.

الامتدادات:

دالة ذات رتبة أعلى: إذا كانت الوظيفة تستوفي إحدى المواصفاتين التاليتين، فإن الوظيفة تكون دالة ذات رتبة أعلى

1. إذا كانت المعلمة التي تقبلها الدالة هي دالة، فيمكن أن تسمى a دالة ذات ترتيب أعلى

2. إذا كانت القيمة المرجعة للدالة a لا تزال دالة، فيمكن أن تسمى a دالة ذات ترتيب أعلى.

3. تتضمن الوظائف ذات الترتيب الأعلى الشائعة ما يلي: Promise، وsetTimeout، وarr.map، وما إلى ذلك.

الأمثلة هي كما يلي؛

في نموذج النموذج، استخدم المكونات الخاضعة للتحكم لربط بيانات الحالة لعرض بيانات النموذج عند النقر:

استيراد React، {Component} من 'react'؛ تصدير الفئة الافتراضية Form Extends Component{state = { userName: '', كلمة المرور: '' } SubmitForm = (event) => { events.preventDefault() // منع إرسال النموذج const {userName,password } = this.state; تنبيه(`${userName}, ${password}`) } updateUserName = (event) => { this.setState({ userName: events.target.value, }) } updatePassword = (event) => { this.setState({password: events.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> ) } }

يمكن ملاحظة أن هذه الطريقة تكون أكثر تعقيدًا عندما يكون هناك العديد من عناصر النموذج، ويمكن استخدام دالة الكاري لتحسينها:

استيراد React، {Component} من 'react'؛ تصدير الفئة الافتراضية Form Extends Component{state = { userName: '', كلمة المرور: '' } SubmitForm = (event) => { events.preventDefault() // منع إرسال النموذج const {اسم المستخدم، كلمة المرور } = this.state; تنبيه(`${userName}, ${password}`) } updateFormData = (key) => { return (event) => { this.setState({ [مفتاح]: حدث .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'؛ تصدير الفئة الافتراضية Form Extends Component{state = { userName: '', كلمة المرور: '' } SubmitForm = (event) => { events.preventDefault() // منع إرسال النموذج const {اسم المستخدم، كلمة المرور } = this.state; تنبيه(`${userName}, ${password}`) } updateFormData = (مفتاح, حدث) => { this.setState({ [مفتاح]: events.target.value, }) } render() { return ( <form onSubmit={this.submitForm}> اسم المستخدم:<input type="text" name="userName" onChange={(event) => this.updateFormData('userName', events )}/> كلمة المرور: <input type="password" name="password" onChange={(event) => this.updateFormData('password', events)}/> <button>تسجيل الدخول</button> </form > ) }}