javascript - जीवन चक्र विधि getDerivedStateFromProps का उपयोग कैसे करें




reactjs lifecycle (2)

जैसा कि दान अब्रामोव ने बताया है

इसे रेंडर के अंदर ही करें

हम वास्तव में राज्य गणना के लिए किसी भी प्रकार के समीपवर्ती प्रॉप्स के लिए संस्मरण के साथ उस दृष्टिकोण का उपयोग करते हैं।

हमारा कोड इस तरह दिखता है

// ./decorators/memoized.js  
import memoizeOne from 'memoize-one';

export function memoized(target, key, descriptor) {
  descriptor.value = memoizeOne(descriptor.value);
  return descriptor;
}

// ./components/exampleComponent.js
import React from 'react';
import { memoized } from 'src/decorators';

class ExampleComponent extends React.Component {
  buildValuesFromProps() {
    const {
      watchedProp1,
      watchedProp2,
      watchedProp3,
      watchedProp4,
      watchedProp5,
    } = this.props
    return {
      value1: buildValue1(watchedProp1, watchedProp2),
      value2: buildValue2(watchedProp1, watchedProp3, watchedProp5),
      value3: buildValue3(watchedProp3, watchedProp4, watchedProp5),
    }
  }

  @memoized
  buildValue1(watchedProp1, watchedProp2) {
    return ...;
  }

  @memoized
  buildValue2(watchedProp1, watchedProp3, watchedProp5) {
    return ...;
  }

  @memoized
  buildValue3(watchedProp3, watchedProp4, watchedProp5) {
    return ...;
  }

  render() {
    const {
      value1,
      value2,
      value3
    } = this.buildValuesFromProps();

    return (
      <div>
        <Component1 value={value1}>
        <Component2 value={value2}>
        <Component3 value={value3}>
      </div>
    );
  }
}

इसका लाभ यह है कि आपको getDerivedStateFromProps या getDerivedStateFromProps अंदर तुलना बॉयलरप्लेट के टन को कोड करने की आवश्यकता नहीं है और आप एक निर्माता के अंदर कॉपी-पेस्ट आरंभीकरण को छोड़ सकते हैं।

ध्यान दें:

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

ऐसा लग रहा है कि एक नए जीवनचक्र की विधि getDerivedStateFromProps पक्ष में, आने वाले रिलीज में पूरी तरह से चरणबद्ध होने जा रहा है।

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

निरीक्षण करने पर, ऐसा लगता है कि आप अब nextProps और nextProps बीच सीधी तुलना करने में असमर्थ हैं, जैसे कि आप कर सकते हैं nextProps । क्या इसके आसपास कोई रास्ता है?

इसके अलावा, यह अब एक वस्तु देता है। क्या मैं यह मानने के लिए सही हूं कि रिटर्न वैल्यू अनिवार्य रूप से यह है। this.setState ?

नीचे एक उदाहरण है जो मुझे ऑनलाइन मिला https://github.com/reactjs/rfcs/blob/master/text/0006-static-lifecycle-methods.md#state-derived-from-propsstate

से पहले

class ExampleComponent extends React.Component {
  state = {
    derivedData: computeDerivedState(this.props)
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.someValue !== nextProps.someValue) {
      this.setState({
        derivedData: computeDerivedState(nextProps)
      });
    }
  }
}

बाद

class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {};

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.someMirroredValue !== nextProps.someValue) {
      return {
        derivedData: computeDerivedState(nextProps),
        someMirroredValue: nextProps.someValue
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

जैसा कि हमने हाल ही में रिएक्ट ब्लॉग पर पोस्ट किया है , अधिकांश मामलों में आपको getDerivedStateFromProps आवश्यकता नहीं है

यदि आप कुछ व्युत्पन्न डेटा की गणना करना चाहते हैं, तो:

  1. इसे render अंदर ही करें
  2. या, यदि यह फिर से गणना करना महंगा है, तो memoize-one तरह memoize-one सहायक का उपयोग करें।

यहाँ "सरल" उदाहरण के बाद:

import memoize from "memoize-one";

class ExampleComponent extends React.Component {
  getDerivedData = memoize(computeDerivedState);

  render() {
    const derivedData = this.getDerivedData(this.props.someValue);
    // ...
  }
}

अधिक जानने के लिए ब्लॉग पोस्ट के इस भाग को देखें








lifecycle