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




reactjs lifecycle (4)

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

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

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

इसके अलावा, यह अब एक वस्तु देता है। क्या मैं यह मानने के लिए सही हूं कि रिटर्न वैल्यू अनिवार्य रूप से यह है। 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;
  }
}

Answers

getDerivedStateFromProps को हटाने के बारे में: आपको getDerivedStateFromProps और getDerivedStateFromProps संयोजन के साथ इसके उपयोग को संभालने में सक्षम होना चाहिए, उदाहरण के माइग्रेशन के लिए प्रतिक्रिया ब्लॉग पोस्ट देखें। और हाँ, getDerivedStateFromProps द्वारा लौटाई गई वस्तु राज्य को उसी तरह अपडेट करती है जैसे कि setState को पास की गई वस्तु।

यदि आपको वास्तव में किसी प्रॉप के पुराने मूल्य की आवश्यकता है, तो आप हमेशा अपने राज्य में इसे कुछ इस तरह से कैश कर सकते हैं:

state = { cachedSomeProp: null };

static getDerivedStateFromProps(nextProps, prevState) {
  // do things with nextProps.someProp and prevState.cachedSomeProp
  return {
    cachedSomeProp: nextProps.someProp,
    ..
  };
}

जो कुछ भी राज्य को प्रभावित नहीं करता है उसे componentDidUpdate में रखा जा सकता है, और बहुत कम-स्तरीय सामान के लिए एक getSnapshotBeforeUpdate भी है।

अद्यतन: नए (और पुराने) जीवनचक्र विधियों के लिए एक महसूस करने के लिए, react-lifecycle-visualizer पैकेज मददगार हो सकता है।


जैसा कि हमने हाल ही में रिएक्ट ब्लॉग पर पोस्ट किया है , अधिकांश मामलों में आपको 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);
    // ...
  }
}

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


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

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

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

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

// ./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 अंदर तुलना बॉयलरप्लेट के टन को कोड करने की आवश्यकता नहीं है और आप एक निर्माता के अंदर कॉपी-पेस्ट आरंभीकरण को छोड़ सकते हैं।

ध्यान दें:

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


एक एसिंक्रोनस फ़ंक्शन से मूल्य वापस करने का एक और तरीका, किसी ऑब्जेक्ट में पास करना है जो परिणाम को एसिंक्रोनस फ़ंक्शन से संग्रहीत करेगा।

यहां इसका एक उदाहरण दिया गया है:

var async = require("async");

// This wires up result back to the caller
var result = {};
var asyncTasks = [];
asyncTasks.push(function(_callback){
    // some asynchronous operation
    $.ajax({
        url: '...',
        success: function(response) {
            result.response = response;
            _callback();
        }
    });
});

async.parallel(asyncTasks, function(){
    // result is available after performing asynchronous operation
    console.log(result)
    console.log('Done');
});

मैं resultएसिंक्रोनस ऑपरेशन के दौरान मूल्य को स्टोर करने के लिए ऑब्जेक्ट का उपयोग कर रहा हूं । यह परिणाम असीमित काम के बाद भी उपलब्ध हो सकता है।

मैं इस दृष्टिकोण का बहुत उपयोग करता हूं। मुझे यह जानने में दिलचस्पी होगी कि यह दृष्टिकोण कितना अच्छा काम करता है जहां लगातार मॉड्यूल के माध्यम से परिणाम तारों को शामिल किया जाता है।







javascript reactjs lifecycle