لماذا نستخدم react hooks بدلا من الكلاس class components

كانت React hooks موجودة منذ فترة، لكن العديد من مطوري React لا يستخدمونها كثيرًا (مقارنة بالأصناف classes). وهناك سببين رئيسيين وراء ذلك. السبب الأول هو أن العديد من مطوري React يشاركون بالفعل في مشروع كبير، الأمر الذي يتطلب جهدًا كبيرًا لإعادة كتابة الكود بأكمله لكي يتناسب مع react hooks. السبب الآخر هو معرفتهم بأصناف React، فيقول بعض مطوري React: "لماذا أتعلم شيء جديد والذي أعرفه بالفعل يعمل بشكل جيد؟".

لكن بالرغم من ذلك، إلا أن هناك أسباب تدفعك لتعلم وإستخدام React Hooks:

1. لن تحتاج إلى إعادة كتابة functional component إلى class component عندما يزداد حجم الكود في الدالة.
   هناك أوقات يبدأ فيها مكون React بـ functional component، والذي يعتمد فقط على props ثم يتطور لاحقًا إلى مكون Class به state. يتطلب التغيير من functional component إلىclass component القليل من إعادة البناء refactoring، اعتمادًا على مدى تعقيد المكون، لكن عندما تستخدم react hooks من البداية، فلن تحتاج إلى إعادة كتابة المكونات لأن لديك كل شيء بالفعل من خلال react hooks.

2. لا داعي للقلق بشأن الكلمة المفتاحية "this" بعد الآن
   الجملة أدناه من وثائق React الرسمية.

   اقتباس

   Classes confuse both people and machines

   أحد أسباب هذا الالتباس هو هذه الكلمة المفتاحية "this". إذا كنت معتادًا على استخدام JavaScript، فأنت تعلم أن this في JavaScript لا تعمل تمامًا كما هو الحال في اللغات الأخرى. عندما يتعلق الأمر بـ React Hooks، فلا داعي للقلق بشأن هذه الكلمة على الإطلاق. هذا جيد للمبتدئين وكذلك للمطورين ذوي الخبرة. سهولة في كتابة وقراءة الكود يعني سرعة في التطوير وعدد أخطاء أقل.

3. لا داعي لإستخدام لربط الدوال method bindings 
   لن تحتاج إلى عمل method binding لكي تستخدم الدوال ، كل ما عليك فعله هو عمل handler، واستخدم بطريقة مباشرة، هذا كل ما في الأمر. وهذا الأمر يعني بالطبع كود أقل وسرعة في كتابة الشيفرة.

4. أسهل في فصل المنطق البرمجي logic عن واجهة المستخدم UI، مما يجعل كليهما أكثر قابلية لإعادة الاستخدام reusable
   استخدام الخطافات سجعل من السهل الفصل بين المنطق وواجهة المستخدم. لا حاجة إلى HOC أو render props. تقوم الخطافات بذلك ببساطة مع تركيبات أقل تداخلًا وأكثر سهولة لكل من واجهة المستخدم والمنطق.

5. احتفظ بالمنطق البرمجي logic المرتبط في نفس المكان
   عند إستخدام class component ، لدينا طرق مختلفة لدورة حياة الخطافات lifecycle hooks مثل componentDidMountand و componentDidUpdate وما إلى ذلك. ومع مرور الوقت ، سيكون هناك العديد من المنطق المتضمن في هذه التوابع، وسيكون من الصعب تتبع الكود وكيفية عمليه.

   اقتباس

   Complex components become hard to understand

    

6. تقاسم المنطق المصحوب بالحالة بين المكونات
   عند إستخدام class component ،  يكون من الصعب مشاركة المنطق القائم على الحالة state بين المكونات. ضع في اعتبارك مكونين حيث يتعين على كليهما جلب البيانات وفرزها وعرضها من مصدرين مختلفين للبيانات. على الرغم من أن كلا المكونين لهما نفس الوظيفة ، فمن الصعب مشاركة المنطق لأن هذه المكونات لها مصادر وحالات مختلفة. لكن باستخدام Custom React Hooks ، يمكنك استخراج هذه المنطق ذات الحالة القابلة لإعادة الاستخدام واختبارها بشكل منفصل.

في حين أن هناك العديد من الأسباب للإنتقال إلى React Hooks، فقد ذكرت أكثر الأسباب إنتشارًا لكي تنتقل إلى إستخدام React Hooks. إذا نظرت إلى الوثائق الرسمية، فسترى أن هناك العديد من الوظائف المثيرة للاهتمام في React Hooks. يمكنك الإطلاع عليها ومعرفة المزيد عنها من خلال موسوعة حسوب من هنا (الخطافات في React).

يمكنك معرفة بعض الفروق التقنية بين الطريقتين في كتابة المكونات من خلال الإجابات على هذا السؤال:

للreact hooks فوائد عدة أهمها:

1. تمكنك من العمل على الfunctional components 
2.  ﻻ تحتاج للقلق بشأن الكلمة this  حيث أنها ﻻ تُستخدم في الreact functinal components , وتلك الكلمة المفتاحية لها معاملة خاصة نوعاً ما وتسبب نوع من التشتت لبعض المطورين

   class ComponentClss extends React.component{
   
     constructor(props){
     	super(props);
       this.state={
       	name:""
       
       }
       
     }
     componentDidMount(){
     	this.setState({
       name:this.props.name
       })
     }
   
   }
   
   const FunctuinalComponent=(props)=>{
     const [name,setName]=useState("");
     useEffect(()=>setName(props.name),[])
     
   }

    

3. كما تﻻحظ أن الشفرة البرمجية أصبحت أقل حجماً, أقل تعقيدا, وأسهل للإستخدام

4. ﻻ تحتاج لربط الدوال , ففي class components تحتاج لربط الدوالmethod binding حتى تستطيع إستخدامها 

   class ComponentClass extends React.component{
   constructor(){
   /////initialization code
     this.handleClick=this.handleClick.bind(this);
   }
     handleClick(e){
     	///do something
     }
   
   }