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

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

class app extends Component {

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

  }

}

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

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

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

class app extends Component {

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

  }

}

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

 

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

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

بتاريخ 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>;
    }
};

حتى نعرف الفرق بين الكود الموجود بداخل الدالة  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  مثل

• القراءة عن ال constructor
• القراءة عن ال render

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