reactjs setstate - ما هو الفرق بين استخدام منشئ مقابل getInitialState في React / React Native؟




style (5)

لقد رأيت كلاهما يستخدمان بالتبادل.

ما هي حالات الاستخدام الرئيسية لكليهما؟ هل هناك مزايا / عيوب؟ هل أحد أفضل الممارسات؟


Answers

حسنًا ، الفرق الكبير هو بداية من مصدرها ، لذلك constructor هو منشئ صفك في جافا سكريبت ، على الجانب الآخر ، يعد getInitialState جزءًا من lifecycle React .

constructor هو المكان الذي تحصل على بدء صفك ...

البناء

طريقة منشئ هي طريقة خاصة لإنشاء وتهيئة كائن تم إنشاؤه بفئة. يمكن أن يكون هناك طريقة خاصة واحدة فقط باسم "منشئ" في فئة. سيتم طرح SyntaxError إذا كانت الفئة تحتوي على أكثر من حدوث أسلوب منشئ.

يمكن منشئ استخدام الكلمة الأساسية super لاستدعاء منشئ لفئة أصل.

في وثيقة getInitialState ، لم يذكروا أي تفضيل ، لكنك تحتاج إلى getInitialState إذا كنت تستخدم createReactClass() ...

تحديد الدولة الأولية

في فصول ES6 ، يمكنك تحديد الحالة الأولية عن طريق تعيين هذه الحالة. في المنشئ:

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

مع createReactClass () ، يجب عليك توفير أسلوب getInitialState منفصلة تقوم بإرجاع الحالة الأولية:

var Counter = createReactClass({
  getInitialState: function() {
    return {count: this.props.initialCount};
  },
  // ...
});

زيارة here لمزيد من المعلومات.

كما أنشأت الصورة أدناه لإظهار عدد قليل من دورات الحياة من Compoent Compoenents:


إذا كنت تكتب فئة React-Native مع ES6 ، فسيتم اتباع التنسيق التالي. ويشمل أساليب دورة الحياة من RN لمكالمات الشبكة جعل الطبقة.

import React, {Component} from 'react';
import {
     AppRegistry, StyleSheet, View, Text, Image
     ToastAndroid
} from 'react-native';
import * as Progress from 'react-native-progress';

export default class RNClass extends Component{
     constructor(props){
          super(props);

          this.state= {
               uri: this.props.uri,
               loading:false
          }
     }

     renderLoadingView(){
          return(
               <View style={{justifyContent:'center',alignItems:'center',flex:1}}>
                    <Progress.Circle size={30} indeterminate={true} />
                    <Text>
                        Loading Data...
                    </Text>
               </View>
          );
     }

     renderLoadedView(){
          return(
               <View>

               </View>
          );
     }

     fetchData(){
          fetch(this.state.uri)
               .then((response) => response.json())
               .then((result)=>{

               })
               .done();

               this.setState({
                         loading:true
               });
               this.renderLoadedView();
     }

     componentDidMount(){
          this.fetchData();
     }

     render(){
          if(!this.state.loading){
               return(
                    this.renderLoadingView()
               );
          }

          else{

               return(
                    this.renderLoadedView()
               );
          }
     }
}

var style = StyleSheet.create({

});

الفرق بين constructor و getInitialState هو الفرق بين ES6 و ES5 نفسها.
getInitialState يستخدم مع React.createClass و
constructor يستخدم مع React.Component .

وبالتالي فإن السؤال يتلخص في مزايا / عيوب استخدام ES6 أو ES5 .

دعونا ننظر إلى الفرق في التعليمات البرمجية

ES5

var TodoApp = React.createClass({ 
  propTypes: {
    title: PropTypes.string.isRequired
  },
  getInitialState () { 
    return {
      items: []
    }; 
  }
});

ES6

class TodoApp extends React.Component {
  constructor () {
    super()
    this.state = {
      items: []
    }
  }
});

هناك موضوع مثير للاهتمام حول هذا الموضوع .

المجتمع تتفاعل أقرب إلى ES6 . كما تعتبر أفضل الممارسات.

هناك بعض الاختلافات بين React.createClass و React.Component . على سبيل المثال ، كيف يتم التعامل مع هذه في هذه الحالات. قراءة المزيد عن هذه الاختلافات في هذا بلوق ومحتوى فيسبوك على autobinding

يمكن أيضا أن تستخدم constructor للتعامل مع مثل هذه الحالات. لربط أساليب إلى مثيل مكون ، يمكن prebinded في constructor . This مادة جيدة للقيام بهذه الأشياء الرائعة.

بعض المواد الجيدة حول أفضل الممارسات
أفضل الممارسات لحالة المكون في React.js
تحويل مشروع React من ES5 إلى ES6


النهجان غير قابلة للتبادل. يجب عليك تهيئة الحالة في المُنشئ عند استخدام فئات ES6 ، وتحديد أسلوب getInitialState عند استخدام React.createClass .

انظر وثيقة React doc الرسمية حول موضوع فصول ES6 .

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state */ };
  }
}

ما يعادل

var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});

كما ذكر آخرون سابقًا ، تم إيقاف Navigator منذ الإصدار 0.40 ، ولكن لا يزال من الممكن استيراده لدعم التطبيقات الأقدم:

تمت إزالة Navigator من حزمة React Native الأساسية في الإصدار 0.44. تم نقل الوحدة إلى حزمة react-native-custom-components يمكن استيرادها بواسطة التطبيق الخاص بك من أجل الحفاظ على التوافق مع الإصدارات السابقة.

لرؤية المستندات الأصلية لـ Navigator ، يرجى التبديل إلى نسخة قديمة من المستندات.

حسب المستندات (React Native v0.54) التنقل بين الشاشات . من المستحسن الآن استخدام ميزة REct Navigation إذا كنت قد بدأت للتو ، أو NavigatorIOS للتطبيقات التي لا تعمل بنظام Android

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

...

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

ملاحظة : في وقت تقديم هذه الإجابة ، كان React Native في الإصدار 0.54







reactjs react-native constructor