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



Answers

الفرق بين 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

Question

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

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




إذا كنت تكتب فئة 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({

});



Related