reactjs - style react native




ما الفرق بين استخدام constructor و getInitialState في React/React Native؟ (4)

إذا كنت تكتب React-Native class مع 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 نفسه.
يستخدم React.createClass مع 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: []
    }
  }
};

هناك موضوع reddit مثيرة للاهتمام بشأن هذا.

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

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

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

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

تحديث: 9 أبريل 2019 :

مع التغييرات الجديدة في Javascript class API ، لن تحتاج إلى مُنشئ.

هل يمكن أن تفعل

class TodoApp extends React.Component {

    this.state = {items: []}
};

سوف يستمر نقل هذا إلى تنسيق المنشئ ، ولكن لن تقلق بشأنه. يمكنك استخدام هذا التنسيق الذي هو أكثر قابلية للقراءة.

مع رد فعل السنانير

من React الإصدار 16.8 ، يوجد خطافات API Called جديدة.

الآن ، لا تحتاج حتى إلى مكون فئة حتى يكون هناك حالة. يمكن أن يتم ذلك في مكون وظيفي.

import React, { useState } from 'react';

function TodoApp () {
  const items = useState([]);

لاحظ أنه يتم تمرير الحالة الأولية كوسيطة لاستخدام useState ؛ useState([])

قراءة المزيد عن رد فعل السنانير من مستندات الرسمية


في هذه الأيام ، لا يتعين علينا استدعاء المُنشئ داخل المكون - يمكننا أن نطلق على state={something:""} مباشرة state={something:""} ، وإلا React.Component نعلن سابقًا المُنشئ super() ليرث كل شيء من فئة React.Component ثم داخل البناء نهيئ دولتنا.

في حالة استخدام React.createClass بتعريف حالة التهيئة باستخدام طريقة getInitialState .


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

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

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

ما يعادل

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






constructor