بدأت رحلتي في React منذ أربع سنوات مع المكونات الوظيفية والخطافات. ثم جاء "Siswe"، زميل مشارك في المعسكر التدريبي ومتحمس لمكونات الفصل الدراسي المقيم لدينا. بينما كان الباقون منا يتعاونون في مشاريع جماعية ذات مكونات وظيفية، تشبث سيسوي بالمكونات الطبقية بولاء لا يتزعزع.

المكونات هي اللبنات الأساسية لواجهة المستخدم (UI).

فكر فيها على أنها مكعبات ليغو - يمكنك دمجها بطرق مختلفة لإنشاء هياكل معقدة. إنها أجزاء مستقلة وقابلة لإعادة الاستخدام من التعليمات البرمجية التي تغلف واجهة المستخدم والمنطق.

عادةً ما تبدو إعادة استخدام مكون داخل مكون آخر كما يلي:

import MyComponent from './MyComponent';

function ParentComponent() {
  return (
    

      
    
  );
}

مكونات الفئة والمكونات الوظيفية هما الطريقتان الأساسيتان لإنشاء المكونات في React.

import React, { Component } from 'react';

class Counter extends Component {
 constructor(props) {
  super(props);
  this.state = { count: 0 };
 }

 handleClick = () => {
  this.setState({  
 count: this.state.count   1 });
 };

 render() {
  return  
 (
   

    
You clicked {this.state.count} times
    Click me
   
  );
 }
}

export default Counter;

هذا مكون فئة، تم إنشاؤه باستخدام فئات JavaScript التي توسع فئة React.Component.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count   1);
  };

  return (
    

      
You clicked {count} times
      Click me
    
  );
}

export default Counter;

من ناحية أخرى، يعد هذا مكونًا وظيفيًا، مكتوبًا كوظيفة جافا سكريبت بسيطة.

إدارة الدولة: الفرق الأساسي.

تقوم مكونات الفئة بإدارة حالتها الداخلية باستخدام this.state. تتم تهيئة هذا عادةً في المُنشئ، ويتم الوصول إليه باستخدام كائن this.state، ويتم تحديثه باستخدام أسلوب this.setState، كما هو موضح في مقطع التعليمات البرمجية أعلاه.

كانت المكونات الوظيفية عديمة الجنسية في البداية. ولكن مع تقديم الخطافات، اكتسبوا القدرة على إدارة منطق الحالة ودورة الحياة. باستخدام الخطاف useState لإدارة الحالة، فإنه يُرجع زوجًا من القيم: الحالة الحالية ووظيفة لتحديثها، كما هو موضح أعلاه. وهذا يكفي لإدارة الدولة البسيطة. للحصول على منطق حالة أكثر تعقيدًا يتضمن قيمًا فرعية متعددة، أو عندما تعتمد الحالة التالية على الحالة السابقة، فأنت تريد استخدام useReducer.
على سبيل المثال:

import React, { useReducer } from 'react';

const initialState = {
  count: 0,
  step: 1,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count   state.step };
    case 'decrement':   

      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload   
 };
    default:
      throw new Error();
  }
};

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement'   
 });
  const setStep = (newStep) => dispatch({ type: 'setStep', payload: newStep });

  return (
    

      
Count: {state.count}
      
Step: {state.step}
       
      -
       setStep(Number(e.target.value))} />
    
  );
}

export default Counter;

هنا، useReducer يدير قيم الحالة المتعددة ومنطق التحديث المعقد بطريقة منظمة وقابلة للصيانة. الخطافات مخصصة حصريًا للمكونات الوظيفية.

تجنب المعالجة المباشرة لكائن الحالة في كلا المكونين.

لا تقم مطلقًا بتعديل أو تغيير كائن الحالة بشكل مباشر، بغض النظر عن نوع المكون. بدلاً من ذلك، قم بإنشاء كائن جديد بالقيم المحدثة. يساعد هذا الأسلوب React على تتبع التغييرات بكفاءة وتحسين عمليات إعادة العرض.

مثال للمكون الوظيفي:

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: 'Jane Doe', age: 30 });

  const handleNameChange = (newName) => {
    setUser({ ...user, name: newName }); // Create a new object with updated name
  };

  return (
    

      
Name: {user.name}
      
Age: {user.age}
       handleNameChange(e.target.value)} />
    
  );
}

export default UserProfile;

مثال على مكون الفصل:

import React, { Component } from 'react';

class UserProfile extends Component {
  state = { user: { name: 'Jane Doe', age: 30 } };

  handleNameChange = (newName) => {
    this.setState(prevState => ({
      user: { ...prevState.user, name: newName } // Create a new object with updated name
    }));
  };

  render() {
    return (
      

        
Name: {this.state.user.name}
        
Age: {this.state.user.age}
         this.handleNameChange(e.target.value)} />
      
    );
  }
}

export default UserProfile;

في كلا المثالين، نقوم بتحديث خاصية الاسم لكائن المستخدم مع الحفاظ على سلامة الكائن الأصلي. يضمن ذلك إنشاء كائن حالة جديد، مع الحفاظ على الثبات ومنع المشكلات المحتملة في تحديثات الحالة. ويضمن الالتزام بهذا السلوك الذي يمكن التنبؤ به، وتحسين الأداء، وتصحيح الأخطاء بشكل أسهل.

مكونات الفئة مخصصة للمنطق المعقد.

• إدارة الحالة المعقدة: عند التعامل مع منطق الحالة المعقد الذي يتطلب تحكمًا دقيقًا، يمكن لمكونات الفئة مع this.state وthis.setState أن توفر المزيد من المرونة.
• طرق دورة الحياة: بالنسبة للمكونات التي تعتمد بشكل كبير على أساليب دورة الحياة مثل ComponentDidMount، أو ComponentDidUpdate، أو ComponentWillUnmount، فإن مكونات الفئة هي الاختيار التقليدي.
• حدود الخطأ: للتعامل مع الأخطاء داخل شجرة المكونات ومنع الأعطال، تعتبر مكونات الفئة مع ComponentDidCatch ضرورية.
• تحسين الأداء: في سيناريوهات محددة ذات أهمية كبيرة للأداء، يمكن الاستفادة من PureComponent أو mustComponentUpdate داخل مكونات الفئة.
• قواعد التعليمات البرمجية القديمة: إذا كنت تعمل على مشروع حالي يعتمد بشكل كبير على مكونات الفئة، فقد يكون من الأسهل الحفاظ على الاتساق عن طريق استخدامها للمكونات الجديدة.

المكونات الوظيفية مخصصة لوجهات النظر البسيطة.

• المكونات البسيطة: بالنسبة لمكونات العرض التقديمي ذات الحد الأدنى من الحالة أو المنطق، غالبًا ما تكون المكونات الوظيفية هي الخيار المفضل نظرًا لبساطتها وسهولة قراءتها.
• إدارة الحالة باستخدام الخطافات: توفر الاستفادة من useState وuseReducer في المكونات الوظيفية طريقة قوية ومرنة لإدارة الحالة.
• التأثيرات الجانبية: يسمح خطاف useEffect بإدارة التأثيرات الجانبية مثل جلب البيانات أو الاشتراكات أو معالجة DOM اليدوية (نموذج كائن المستند).
• تحسين الأداء: يمكن استخدام useMemo وuseCallback لتحسين الأداء في المكونات الوظيفية.

دع احتياجات المكون الخاص بك توجه قرارك.

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

لا يكون الاختيار بين المكونات الوظيفية والفئوية واضحًا دائمًا، حيث لا توجد قاعدة صارمة. قم بتقييم متطلبات المكون الخاص بك واختار النوع الذي يتوافق بشكل أفضل مع متطلبات مشروعك.

ما هو المكون الذي تستمتع بالعمل معه أكثر؟