प्रतिक्रिया में राज्य परिवर्तन कैसे सुनें। जेएस?

143

React.js में कोणीय के $ घड़ी फ़ंक्शन के बराबर क्या है ?

मैं राज्य परिवर्तन सुनना चाहता हूं और getSearchResults () जैसे फ़ंक्शन को कॉल करना चाहता हूं।

componentDidMount: function() {
    this.getSearchResults();
}

javascript reactjs

— एनिज़ गुलेक
स्रोत

37

मैंने कोणीय का उपयोग नहीं किया है, लेकिन ऊपर दिए गए लिंक को पढ़ते हुए, ऐसा लगता है कि आप किसी ऐसी चीज़ के लिए कोड करने की कोशिश कर रहे हैं जिसे आपको संभालने की आवश्यकता नहीं है। आप अपने रिएक्ट कंपोनेंट पदानुक्रम में स्टेट्स में बदलाव करते हैं (इसके माध्यम से .सेटस्टैट ()) और रिएक्ट के कारण आपके कंपोनेंट को फिर से रेंडर (प्रभावी रूप से बदलाव के लिए 'सुनना') होगा। यदि आप अपने पदानुक्रम में किसी अन्य घटक से 'सुनना' चाहते हैं तो आपके पास दो विकल्प हैं:

एक सामान्य माता-पिता से हैंडलर नीचे (प्रॉप्स के माध्यम से) पास करें और उन्हें माता-पिता की स्थिति को अपडेट करें, जिससे माता-पिता के नीचे पदानुक्रम फिर से हो जाए।
वैकल्पिक रूप से, पदानुक्रम को कम करने वाले हैंडलर के एक विस्फोट से बचने के लिए, आपको फ्लक्स पैटर्न को देखना चाहिए , जो आपके राज्य को डेटा स्टोर में ले जाता है और घटकों को परिवर्तनों के लिए देखने की अनुमति देता है। फ्लक्सएक्सोर प्लगइन इसके प्रबंधन के लिए बहुत उपयोगी है।

— edoloughlin
स्रोत

3

लेकिन जब आपको दूरस्थ डेटा का उपयोग करने की आवश्यकता होती है, तो क्या होता है?

— RnMss

@RnMss - redux और reducers ( redux.js.org/docs/basics/Reducers.html ) को देखें और फिर से देखें ( github.com/reactjs/reselect )।

— एडोलोफ्लिन

320

राज्य बदलने पर निम्नलिखित जीवनचक्र विधियों को बुलाया जाएगा। यदि कुछ सार्थक बदल गया है, तो यह निर्धारित करने के लिए आप दिए गए तर्कों और वर्तमान स्थिति का उपयोग कर सकते हैं।

componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)

— डेरेक स्लेगर
स्रोत

5

जब किसी अन्य घटक में एक संपत्ति को अपडेट किया गया था (कॉलबैक के माध्यम से एक, प्रोप के माध्यम से एक नीचे), और componentDidUpdateप्रोप के साथ घटक में जोड़ना सही तरीका था, तो उसे ट्रिगर करने की आवश्यकता थी। इसके लिए धन्यवाद।

— कीथ डीसी

मुझे लगता है कि यह राज्य परिवर्तनों की अधिसूचना की गारंटी देने का सबसे अच्छा तरीका है, जो कि ओपी ने पूछा है। लेकिन ध्यान दें कि इन तरीकों में से कोई भी राज्य में बदलाव के बाद आग नहीं देगा यदि आप अपडेट को कंधे में दबाकर रखें।

— मध्यरात्रि

28

componentWillUpdateपदावनत किया जा रहा है: reactjs.org/blog/2018/03/27/update-on-async-rendering.html

— दिमित्री

1

componentDidUpdateनए प्रॉप्स प्राप्त करने पर भी आग नहीं लगेगी , जरूरी नहीं कि जब राज्य बदल जाए?

— andy mccullough

1

componentWillUpdateपदावनत किया गया है।

— शॉन

29

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

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

— hasain
स्रोत

6

कंपोनेंटविलरिवप्रॉप्स को हटा दिया गया है: reactjs.org/docs/…

— John Skoumbourdis

14

2019 में रिएक्ट 16.8 के साथ useState और useEffect हुक के साथ, निम्नलिखित अब समान हैं (सरल मामलों में):

AngularJS:

$scope.name = 'misko'
$scope.$watch('name', getSearchResults)

<input ng-model="name" />

प्रतिक्रिया:

const [name, setName] = useState('misko')
useEffect(getSearchResults, [name])

<input value={name} onChange={e => setName(e.target.value)} />

— Aprillion
स्रोत

2

ऊपर वर्णित के रूप में उपयोग के साथ useState का उपयोग करना बिल्कुल सही तरीका है। लेकिन अगर getSearchResults फ़ंक्शन की सदस्यता वापस लेता है, तो उपयोग को एक फ़ंक्शन वापस करना चाहिए जो सदस्यता को सदस्यता रद्द करने के लिए जिम्मेदार होगा। उपयोग से लौटा हुआ फ़ंक्शन निर्भरता के प्रत्येक परिवर्तन (उपरोक्त मामले में नाम) और घटक को नष्ट करने से पहले चलेगा

— शिवांग गुप्ता
स्रोत

1

यह भविष्य में संदर्भ के लिए एक समय हो गया है: विधि shouldComponentUpdate () का उपयोग किया जा सकता है।

प्रॉप्स या स्थिति में बदलाव के कारण अपडेट हो सकता है। इन तरीकों को निम्नलिखित क्रम में कहा जाता है जब एक घटक को फिर से प्रस्तुत किया जा रहा है:

static getDerivedStateFromProps() 
shouldComponentUpdate() 
render()
getSnapshotBeforeUpdate() 
componentDidUpdate()

रेफरी: https://reactjs.org/docs/react-component.html

— Malvinka
स्रोत

आपको एक बूलियन वापस करना होगा shouldComponentUpdateताकि यह इस उपयोग के मामले के लिए उपयुक्त न हो।

— शॉन