क्या मैं React.js में किसी घटक के गुण को अपडेट कर सकता हूं?

Question

React.js के साथ काम करना शुरू करने के बाद, ऐसा लगता है जैसे कि घटनाओं के आधार पर परिवर्तन propsकरते stateहुए स्थिर (मूल घटक से पारित) का इरादा है । हालाँकि, मैंने डॉक्स के संदर्भ में देखा componentWillReceiveProps, जिसमें विशेष रूप से यह उदाहरण शामिल है:

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

इसका मतलब यह माना जाता है कि गुणों की तुलना के आधार पर एक घटक में परिवर्तन हो सकता nextPropsहै this.props। मैं क्या खो रहा हूँ? प्रॉप्स कैसे बदलते हैं, या मैं गलत हूं कि यह कहा जाता है?

Answer 1

एक घटक अपने स्वयं के प्रॉप्स को तब तक अपडेट नहीं कर सकता, जब तक कि वे एरेज़ या ऑब्जेक्ट्स न हों (कंपोनेंट अपडेट होने पर भी अपने प्रॉपर अपडेट करें, भले ही यह एक एंटी-पैटर्न हो), लेकिन अपने राज्य और अपने बच्चों के प्रॉपर को अपडेट कर सकते हैं।

उदाहरण के लिए, एक डैशबोर्ड के पास speedअपने राज्य में एक क्षेत्र है, और इसे गॉज़ के बच्चे को पास करता है, जो इस गति को प्रदर्शित करता है। इसका renderतरीका सिर्फ है return <Gauge speed={this.state.speed} />। जब डैशबोर्ड कॉल करता है this.setState({speed: this.state.speed + 1}), तो गेज नए मूल्य के साथ फिर से प्रदान किया जाता है speed।

ऐसा होने से ठीक पहले, गेज का componentWillReceivePropsआह्वान किया जाता है, ताकि गेज के पास पुराने मान के नए मूल्य की तुलना करने का मौका हो।

Comments

तो ऐसा लगता है कि यह एक बार कहा जाता है जब रिएक्ट घटक को इनिशियलाइज़ किया जाता है और प्रॉप्स प्राप्त होता है। एक घटक बनने के बाद प्रॉप्स वास्तव में "परिवर्तन" नहीं करते हैं। क्या वह सही है?

— मैट हगिंस

विलोम। प्रलेखन कहते हैं: "लागू एक घटक नए मंच प्राप्त कर रहा है जब के लिए प्रारंभिक प्रस्तुत करना इस विधि कहा जाता है नहीं है।।"

— वैलेरी

धन्यवाद। यह सवाल रिएक्ट की प्रारंभिक गलतफहमी से आया है कि स्क्रीन (या स्क्रीन के हिस्से) को रेंडर करते समय एक घटक का पुन: उपयोग किया जाएगा।

— मैट हगिंस

हाँ। एक घटक किसी घटना को सुन सकता है, और हर बार घटना की आग लगने पर अपनी स्थिति को अपडेट कर सकता है।

— वैलरी

मैं भविष्य से आता हूं: componentWillReceivePropsअभी पुराना है: और के संयोजन से प्रतिस्थापित किया गया getDerivedStateFromPropsऔर componentDidUpdate।

— bvdb

Answer 2

सहारा

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

राज्य

एक प्रतिक्रिया घटक को जानकारी का संग्रह करने के लिए राज्य का उपयोग करना चाहिए कि घटक स्वयं बदल सकता है।

एक अच्छा उदाहरण पहले से ही वैलेरी द्वारा प्रदान किया गया है।

Comments

@ali_adravi क्या वे उद्धरण कहीं से कॉपी किए गए हैं? यदि हां, तो संदर्भ क्या है? या वे आपके शब्द हैं, और आपने उन्हें जोर देने के लिए उद्धरण के रूप में स्वरूपित किया है?

— रॉब बेडनार्क

@RobBednark मुझे अब सटीक स्रोत याद नहीं है, लेकिन यकीन है कि कुछ किताब से वाक्य में थोड़ा संशोधन के साथ यह सच है।

— अली आद्रवी

Answer 3

प्रॉप्स तब बदल सकते हैं जब किसी घटक के माता-पिता अलग-अलग गुणों के साथ घटक को फिर से प्रस्तुत करते हैं। मुझे लगता है कि यह ज्यादातर एक अनुकूलन है ताकि किसी भी नए घटक को तत्काल करने की आवश्यकता न हो।

Answer 4

यदि वे सरणी हैं, तो प्रॉपर अपडेट करने की ट्रिक:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';

class Counter extends Component {
  constructor(props) {
    super(props);
      this.state = {
        count: this.props.count
      }
    }
  increment(){
    console.log("this.props.count");
    console.log(this.props.count);
    let count = this.state.count
    count.push("new element");
    this.setState({ count: count})
  }
  render() {

    return (
      <View style={styles.container}>
        <Text>{ this.state.count.length }</Text>
        <Button
          onPress={this.increment.bind(this)}
          title={ "Increase" }
        />
      </View>
    );
  }
}

Counter.defaultProps = {
 count: []
}

export default Counter
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Comments

मैं सोच रहा हूं कि प्रॉप्स के साथ इनिशियलाइज़ स्टेट एंटी-पैटर्न है, इससे बचना चाहिए। यहाँ github.com/vasanthk/react-bits/blob/master/anti-pattern// पढ़ने के लिए अच्छी लिंक है ।

— कोशिशहिंद्री

Answer 5

हुक के साथ बहुत कुछ बदल गया है, जैसे + componentWillReceivePropsमें बदल गया ( जैसा कि इस अन्य एसओ उत्तर में दिखाया गया है ), लेकिन प्रॉप अभी भी रीड-ओनली हैं , इसलिए केवल कॉलर विधि को इसे अपडेट करना चाहिए।useEffectuseRef

Answer 6

यदि आप उपयोग करते हैं recompose, तो mapPropsआने वाले प्रॉपर से निकले नए प्रॉप्स बनाने के लिए उपयोग करें

उदाहरण के लिए संपादित करें:

import { compose, mapProps } from 'recompose';

const SomeComponent = ({ url, onComplete }) => (
  {url ? (
    <View />
  ) : null}
)

export default compose(
  mapProps(({ url, storeUrl, history, ...props }) => ({
    ...props,
    onClose: () => {
      history.goBack();
    },
    url: url || storeUrl,
  })),
)(SomeComponent);

Comments

कृपया एक उदाहरण प्रदान करें

— vsync