रिएक्ट घटक प्रॉप्स से राज्य को इनिशियलाइज़ करता है

Question

प्रतिक्रिया में, क्या इन दो कार्यान्वयनों के बीच कोई वास्तविक अंतर हैं? कुछ दोस्त मुझे बताते हैं कि FirstComponent पैटर्न है, लेकिन मैं ऐसा क्यों नहीं देखता। SecondComponent सरल लगता है क्योंकि रेंडर केवल एक बार कहा जाता है।

प्रथम:

import React, { PropTypes } from 'react'

class FirstComponent extends React.Component {

  state = {
    description: ''
  }

  componentDidMount() {
    const { description} = this.props;
    this.setState({ description });
  }

  render () {
    const {state: { description }} = this;    
    return (
      <input type="text" value={description} /> 
    );
  }
}

export default FirstComponent;

दूसरा:

import React, { PropTypes } from 'react'

class SecondComponent extends React.Component {

  state = {
    description: ''
  }

  constructor (props) => {
    const { description } = props;
    this.state = {description};
  }

  render () {
    const {state: { description }} = this;    
    return (
      <input type="text" value={description} />   
    );
  }
}

export default SecondComponent;

अद्यतन: मैंने setState () को this.state = {} (धन्यवाद joews) में बदल दिया, हालाँकि, मुझे अभी भी अंतर दिखाई नहीं दे रहा है। क्या एक दूसरे से बेहतर है?

Comments

आप राज्य में अपना सहारा क्यों जमा कर रहे हैं? आपको किसी मूल्य को कैशिंग करने के बजाय सीधे अपने प्रॉप्स का उपयोग करना चाहिए। पढ़ें क्यों राज्य में React.js में सेटिंग के रूप में Props सेटिंग है। Blasphemy है और GetInitialState में एक विरोधी पैटर्न है ।

— औरोरा ०१०१

एक उदाहरण - एक टॉगल करने योग्य घटक (जैसे एक पॉपओवर या दराज)। माता-पिता को पता है कि क्या घटक को खुला या बंद करना शुरू करना चाहिए; घटक स्वयं जान सकता है कि यह एक समय पर खुला है या नहीं। उस मामले में मुझे लगता this.state = { isVisible: props.isVisible }है कि समझ में आता है। यह निर्भर करता है कि ऐप UI स्थिति को कैसे वितरित करता है।

— २०

आप इस पढ़ना चाहिए medium.com/@justintulk/...

— Fdisk

: 2017 में, फेसबुक अपने दस्तावेज में प्रारंभिक अवस्था स्थापित करने के लिए रंगमंच की सामग्री का उपयोग कर प्रदर्शित करता है कि reactjs.org/docs/react-component.html#constructor

— Rohmer

@ Aurora0001 उस स्थिति में क्या है जहाँ आपको एक फ़ॉर्म को संभालने की आवश्यकता होती है, एक संपादन फ़ॉर्म कहते हैं जो इस पर नेटवर्क अनुरोध करेगा, लेकिन आपको इनपुट को उन मानों के साथ आरंभीकृत करने की आवश्यकता है जो उस घटक के लिए सहारा के रूप में आएंगे। प्रपत्र को गतिशील रखने के लिए, उन मूल्यों को राज्य में रखा जाना चाहिए।

— एरिक मैकविंर

Answer 1

यह ध्यान दिया जाना चाहिए कि यह गुणों को कॉपी करने का एक विरोधी पैटर्न है जो कभी भी राज्य में नहीं बदलता है (बस उस स्थिति में सीधे पहुंच।)। यदि आपके पास एक राज्य चर है जो अंततः बदल जाएगा, लेकिन .props से एक मान के साथ शुरू होता है, तो आपको एक निर्माता कॉल की भी आवश्यकता नहीं है - ये स्थानीय चर माता-पिता के निर्माता को कॉल करने के बाद आरंभिक होते हैं:

class FirstComponent extends React.Component {
  state = {
    x: this.props.initialX,
    // You can even call functions and class methods:
    y: this.someMethod(this.props.initialY),
  };
}

यह नीचे दिए गए @joews के उत्तर के बराबर एक शॉर्टहैंड है। यह केवल es6 ट्रांसपैरर्स के अधिक हाल के संस्करणों पर काम करने के लिए लगता है, मुझे कुछ वेबपैक सेटअप पर इसके साथ समस्या थी। यदि यह आपके लिए काम नहीं करता है, तो आप बेबल प्लगइन को जोड़ने का प्रयास कर सकते हैं babel-plugin-transform-class-properties, या आप नीचे दिए गए @joews द्वारा गैर-शॉर्टहैंड संस्करण का उपयोग कर सकते हैं।

Comments

क्या आप बता सकते हैं कि आपका उत्तर @joews उत्तर से कैसे भिन्न है?

— जलाल

जोड़ा गया "यदि आप कर रहे हैं तो आप कंस्ट्रक्टर कॉल को छोड़ सकते हैं।"

— ज़ेन हूपर

यदि यह काम नहीं करता है, तो आपको संभवतः इस बैबल प्लगइन "बैबेल-प्लगइन-ट्रांसफॉर्म-क्लास-प्रॉपर्टीज" को स्थापित करना होगा।

— फहीम

यह प्रॉप्स से राज्य को इनिशियलाइज़ करने के लिए एक एंटी-पैटर्न नहीं है अगर यह समझा जाता है कि राज्य इनिशियलाइज़ेशन के बाद प्रॉप्स पर भरोसा नहीं करता है। यदि आप दोनों को सिंक में रखने की कोशिश कर रहे हैं, तो यह एक विरोधी पैटर्न है।

— येट्रिक्स

@ ak85 यह एक ही वाक्यविन्यास है, लेकिन आप इसके बजाय इसका उपयोग करेंगे। यह वाक्य रचना वर्ग निर्माण प्रक्रिया के दौरान राज्य की स्थापना के लिए सिर्फ एक संक्षिप्त वाक्यविन्यास है (और इसका उपयोग राज्य के अलावा अन्य चर के लिए भी किया जा सकता है)

— Zane Hooper

Answer 2

आपको setStateकिसी घटक में कॉल करने की आवश्यकता नहीं है constructor- यह this.stateसीधे सेट करने के लिए मुहावरेदार है :

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      x: props.initialX
    };
  }
  // ...
}

प्रतिक्रिया डॉक्स देखें - स्थानीय राज्य को एक वर्ग में जोड़ना ।

आपके द्वारा वर्णित पहली विधि का कोई लाभ नहीं है। यह पहली बार घटक को माउंट करने से तुरंत पहले एक दूसरे अपडेट में परिणाम देगा।

Comments

अच्छा उत्तर। यह ध्यान देने योग्य हो सकता है कि यह केवल प्रारंभिक अवस्था की स्थापना के लिए है; setStateयदि आप इसे किसी अन्य बिंदु पर म्यूट करते हैं, तो भी आपको उपयोग करने की आवश्यकता है , अन्यथा परिवर्तन प्रस्तुत नहीं हो सकते हैं।

— औरोरा ०१०११

धन्यवाद फिर से jowes, दूसरा प्रलेखन facebook.github.io/react/docs/…

— लेवी मोरेरा

(क्षमा करें, मैं प्रेस दर्ज करता हूं ..) हमें प्रॉप्स को राज्य में सेट करने के लिए getInitialState का उपयोग करना चाहिए, और अधिक जटिल कार्यों में, यदि हम सरल हैं तो बस इस रेंडर का उपयोग कर सकते हैं। सही, सही?

— लेवी मोरेरा

सीमांत नोट पर: super(props)कंस्ट्रक्टर में उपयोग करें । SO पर चर्चा

— cutemachine

ज्यादातर मामलों में जॉज़ का सुझाव काम करता है, लेकिन सीधे प्रॉप्स भेजने के बारे में सावधान रहें। सीधे। This.state को रंगमंच की सामग्री की प्रतिलिपि बनाना वास्तव में againt है सच्चाई का एकल स्रोत ( medium.com/react-ecosystem/... )। इसके अलावा, दान अब्रामोव ने एक बार राज्य में सहारा के मूल्यों को संग्रहीत नहीं करने का सुझाव दिया था। ( Twitter.com/dan_abramov/status/749710501916139520/photo/1 )।

— हिरोकी

Answer 3

प्रतिस्थापन के रूप में प्रतिक्रिया 16.3 अल्फ़ा परिचय static getDerivedStateFromProps(nextProps, prevState)( डॉक्स ) के लिए अद्यतन करेंcomponentWillReceiveProps ।

getDerivedStateFromProps एक घटक के तुरंत बाद शुरू होने के साथ ही नए प्रॉप्स प्राप्त करने पर लागू किया जाता है। राज्य को अपडेट करने के लिए उसे एक वस्तु वापस करनी चाहिए, या यह इंगित करने के लिए कि नए प्रॉप्स को किसी भी राज्य अपडेट की आवश्यकता नहीं है।

ध्यान दें कि यदि कोई मूल घटक आपके घटक को पुन: रेंडर करने का कारण बनता है, तो यह विधि तब भी कॉल की जाएगी, भले ही प्रॉप्स परिवर्तित नहीं हुए हों। आप नए और पिछले मूल्यों की तुलना करना चाह सकते हैं यदि आप केवल परिवर्तनों को संभालना चाहते हैं।

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

यह स्थिर है, इसलिए यह तक सीधी पहुंच नहीं है this(हालांकि यह करने के लिए उपयोग करता है prevState, चीजों को सामान्य रूप से से जुड़ी संग्रहीत कर सकती है जो thisजैसे refs)

टिप्पणियों में @ nerfologist के सुधार को प्रतिबिंबित करने के लिए संपादित किया गया

Comments

बस स्पष्ट करने के लिए, इसे नाम दिया गया है getDerivedStateFromProps( प्रॉम्प्स में कैपिटल लेटर को चिह्नित करें) और परम हैं nextProps, prevState(नहीं nextState): reactjs.org/docs/…

— nerfologist

वाह! अद्यतन प्रॉप्स प्राप्त होने पर हम स्टेट को अपडेट करने के लिए इसका उपयोग कर सकते हैं!

— अरोमल ससिधरन

क्या हमें अभी भी कंस्ट्रक्टर में प्रारंभिक स्थिति का निर्माण करना है, इस पर विचार करते हुए कि getDerivedStateFromPropsप्रारंभिक रेंडरिंग से पहले हमेशा कहा जाता है?

— bvdb

Answer 4

आप नीचे दिए गए संक्षिप्त रूप का उपयोग कर सकते हैं यदि आप सभी प्रॉप्स को राज्य में जोड़ना चाहते हैं और समान नामों को बनाए रखना चाहते हैं।

constructor(props) {
    super(props);
    this.state = {
       ...props
    }
    //...
}

Comments

यह उन गुणों को कॉपी करने का एक विरोधी पैटर्न है जो कभी भी राज्य में नहीं बदलते हैं। यह स्पष्ट रूप से वर्णन करना बेहतर है कि आपके घटक किन क्षेत्रों का उपयोग करते हैं।

— माइकल फ्रीजिम

Answer 5

कंस्ट्रक्टर के अंदर राज्य डेटा को इस तरह सेट करें

constructor(props) {
    super(props);
    this.state = {
      productdatail: this.props.productdetailProps
    };
  }

यह काम नहीं करने जा रहा है अगर आप यूपी की ओर से घटक के रूप में सेट करें (प्रॉप्स के माध्यम से)।

Answer 6

यदि आप प्रॉप्स से सीधे इनिट स्टेट करते हैं, तो यह रिएक्ट 16.5 (5 सितंबर 2018) में चेतावनी दिखाएगा।

Comments

किसी भी विचार क्यों यह चेतावनी देगा?

— नितिन जाधव

ऐसा लगता है कि यह केवल अगर आप उपयोग करते हैं state = props। यहाँ अधिक जानकारी: github.com/facebook/react/pull/11658#issuecomment-419677176

— अब

Answer 7

keyजब आप जरूरत पड़ने पर राज्य को रीसेट करने के लिए मूल्य का उपयोग कर सकते हैं , तो यह बताएं कि यह एक अच्छा अभ्यास नहीं है, क्योंकि आप एक स्थान पर अनियंत्रित और नियंत्रित घटक हैं। डेटा को एक स्थान पर होना चाहिए ताकि इसे पढ़ा जा सके https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a -चाभी

Answer 8

आप ComponentsWillReceiveProps का उपयोग कर सकते हैं।

constructor(props) {
    super(props);
    this.state = {
      productdatail: ''
    };
  }

    componentWillReceiveProps(nextProps){
        this.setState({ productdatail: nextProps.productdetailProps })
    }

Comments

— घटकडबलिवप्रॉप्स डीप्रेकेटेड

Answer 9

जब आप कंस्ट्रक्टर stateसे आरंभ करते हैं तो आपको CAREFUL होना चाहिए props। यहां तक ​​कि अगर propsनए को बदल दिया जाता है, तो राज्य को नहीं बदला जाएगा क्योंकि माउंट फिर कभी नहीं होता है। तो उसके लिए getDerivedStateFromPropsमौजूद है।

class FirstComponent extends React.Component {
    state = {
        description: ""
    };

    static getDerivedStateFromProps(nextProps, prevState) {
        if (prevState.description !== nextProps.description) {
          return { description: nextProps.description };
        }

        return null;
    }

    render() {
        const {state: {description}} = this;    

        return (
            <input type="text" value={description} /> 
        );
    }
}