اذهب إلى المحتوى
  • 0

الفرق بين render و return في رياكت ( render vs return in react )

Mohamed Rahal

السؤال

السلام عليكم و رحمة الله . 

استاذ . ما الفرق بين الكتابة في classes   خارج render  أي قبلها .  أو الكتابة داخلها , أقصد بين render و return . 

class app extends Component {

  render(){

    return(

    ) 

  }

}

 

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

الفرق هو كالتالي :

class app extends Component {

  render(){
    // render تستطيع هنا كتابة اكواد جافاسكريبت التقليدية والتي سيتم إعادة تنفيذها عند كل عملية تحميل
    return(
      // في رياكت html وهي اللغة البديلة عن jsx  هنا تكتب اكواد 
      // render قد نعتمد احياناً على الاكواد التي يتم توليدها في القسم 
      // سيتم اعادة توليدها عند كل تحميل كذلك
    ) 

  }

}

قد يفيدك الاطلاع على المقالة التالية والتي تتحدث عن اساسيات react

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 2 دقائق مضت قال عمر قره محمد:

الفرق هو كالتالي :

class app extends Component {

  render(){
    // render تستطيع هنا كتابة اكواد جافاسكريبت التقليدية والتي سيتم إعادة تنفيذها عند كل عملية تحميل
    return(
      // في رياكت html وهي اللغة البديلة عن jsx  هنا تكتب اكواد 
      // render قد نعتمد احياناً على الاكواد التي يتم توليدها في القسم 
      // سيتم اعادة توليدها عند كل تحميل كذلك
    ) 

  }

}

قد يفيدك الاطلاع على المقالة التالية والتي تتحدث عن اساسيات react

 

استاذ اقصد ما الفرق بين الكتابة بين constructure و render  مثلا في كتابة الدوال بعد  constructure وقبل render . هذا من جانب . 

وهل يمكن كتابة نفس الدوال بين render و return 

 

   

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 2 دقائق مضت قال القناص القناص:

استاذ اقصد ما الفرق بين الكتابة بين constructure و render  مثلا في كتابة الدوال بعد  constructure وقبل render . هذا من جانب . 

وهل يمكن كتابة نفس الدوال بين render و return   

انصحك بالطلاع على المقالة التي رشحتها لك في التعليق السابق فهي تجيب على تساؤلاتك،

لاحظ المثال التالي والذي يوضح الفرق :

class MySelect extends React.Component {
  constructor(){ // إضافة الحالة الافتراضية
    super();
    this.state = {selected: false}; // this.state.selected = false;
    this.select = this.select.bind(this); // لفهم السطر التالي راجع المقالة كاملةً
  }
  // لاحظ كيف نضيف المتغيرات هنا
  select(event){ // select إضافة الدالة 
    if(event.target.textContent === this.state.selected){ // إزالة التحديد
        this.setState({selected: false}); // تحديث الحالة
    }else{ // إضافة التحديد
        this.setState({selected: event.target.textContent}); // تحديث الحالة
    }   
  }

  render(){
    // لاحظ كيف نضيف المتغيرات هنا
    var mySelectStyle = {
      border: '1px solid #999',
      display: 'inline-block',
      padding: '5px'
    };
    return (
      // render لاحظ كيف نستخدم المتغيرات المعرفة في الـ 
      <div style={mySelectStyle}>
        <MyOption value="Volvo"></MyOption>
        <MyOption value="Saab"></MyOption>
        <MyOption value="Mercedes"></MyOption>
        <MyOption value="Audi"></MyOption>
      </div>
    );
  }
};

class MyOption extends React.Component { 
    render(){
      return <div>{this.props.value}</div>;
    }
};

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

حتى نعرف الفرق بين الكود الموجود بداخل الدالة  render والكود الموجود بخارجها يجب أولاُ أن نتعرف على الهدف من هذه الدالة 

الغرض من ()render :

  • تقوم React بتوليد HTML إلى صفحة الويب باستخدام الدالة ()render
  • باستخدام الدالة ()render يمكننا قراءة ال props وstate وإعادة كود JSX إلى المكون root .
  • في الدالة ()render  لا يمكننا تغيير ال وstate ، ولا يمكننا التسبب في side effects (مثل تقديم طلب HTTP إلى خادم الويب).

وطريقة عملها كالتالي 

يتم عرض العناصر على الشاشة من خلال استدعاء ReactDOM.render الطريقة التي تقارن بين عناصر DOM الحقيقية وvirtual DOM ، مع إجراء أقل عدد ممكن من التغييرات لإحضار DOM الحقيقي إلى ال state الحديثة.

أما بالنسبة للكود الموجود خارج الدالة render لسبب 

  • لتهيئة ال state للمكون عن طريق تعيين كائن إلى this.state
  • لربط(bind) event handlers التي تحدث في المكون

يمكنك قراءة المزيد من المعلومات من خلال موقع react  مثل

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

وظيفة return في الدالة render في reactjs هي نفس وظيفتها في أي دالة function في لغة جافاسكربت ولغات برمجية اخرى, فهي تعيد الناتج النهائي للدالة عند إستدعاءها. أما ما هو خارج return  سواء كان في جسم render أو خارجه فيتم تنفيذه ولكن لا يتم إرجاع ناتجه عند إستدعاء تلك الدالة. return في render في reactjs تعيد لك كود jsx يتم تحويله داخلياً الى html. 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...