प्रतिक्रिया "कोड के बाद" कोड?

Question

मेरे पास एक ऐप है जहां मुझे एक तत्व की ऊंचाई निर्धारित करने की आवश्यकता है (गतिशील रूप से "ऐप-कंटेंट" कहते हैं)। यह एप्लिकेशन के "क्रोम" की ऊंचाई लेता है और इसे घटाता है और फिर उन बाधाओं के भीतर 100% फिट होने के लिए "ऐप-कंटेंट" की ऊंचाई निर्धारित करता है। यह वैनिला जेएस, jQuery, या बैकबोन विचारों के साथ सुपर सरल है, लेकिन मैं यह पता लगाने के लिए संघर्ष कर रहा हूं कि रिएक्ट में ऐसा करने के लिए सही प्रक्रिया क्या होगी?

नीचे एक उदाहरण घटक है। मैं सेट करने के लिए सक्षम होना चाहते हैं app-contentशून्य से खिड़की की 100% का आकार होने के लिए की ऊंचाई ActionBarऔर BalanceBar, लेकिन मैं कैसे जानते हो जब सब कुछ प्रदान की गई है और जहां मैं इस में गणना के सामान डाल प्रतिक्रिया क्लास?

/** @jsx React.DOM */
var List = require('../list');
var ActionBar = require('../action-bar');
var BalanceBar = require('../balance-bar');
var Sidebar = require('../sidebar');
var AppBase = React.createClass({
  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
        <div className="inner-wrapper">
          <ActionBar title="Title Here" />
          <BalanceBar balance={balance} />
          <div className="app-content">
            <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});

module.exports = AppBase;

Comments

पहले मैं "फ्लेक्सबॉक्स इसे कैसे ठीक करेगा?" तब मुझे फ्लेक्सबॉक्स में कॉलम की सुविधा याद आ गई और यह एक आकर्षण की तरह काम करने लगा!

— ऑस्कर गोडसन

Answer 1

componentDidMount ()

आपके घटक के रेंडर होने के बाद इस विधि को एक बार कहा जाता है। तो आपका कोड ऐसा लगेगा।

var AppBase = React.createClass({
  componentDidMount: function() {
    var $this = $(ReactDOM.findDOMNode(this));
    // set el height and width etc.
  },

  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
          <div className="inner-wrapper">
            <ActionBar title="Title Here" />
            <BalanceBar balance={balance} />
            <div className="app-content">
              <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});

Comments

या componentDidUpdateयदि पहले रेंडर के बाद मान बदल सकते हैं।

— २२

मैं एक सीएसएस प्रॉपर्टी बदलने की कोशिश कर रहा हूं जो संक्रमण के लिए सेट है, ताकि एनीमेशन रेंडरिंग के बाद शुरू हो। दुर्भाग्य से, सीएसएस को बदलने से componentDidMount()संक्रमण नहीं होता है।

— आंख_मेव

धन्यवाद। नाम इतना सहज है कि मुझे आश्चर्य है कि मैं "इनिट" या "इनिशियलाइज़" जैसे हास्यास्पद नामों की कोशिश क्यों कर रहा था।

— पावेल

इसे घटक में बदलना ब्राउज़र के लिए बहुत तेज़ है। इसे एक सेट टाइमआउट में लपेटें और इसे कोई वास्तविक समय न दें। यानी componentDidMount: () => { setTimeout(addClassFunction())}, या rAF का उपयोग करें, नीचे दिया गया उत्तर यह उत्तर प्रदान करता है।

यह सबसे निश्चित रूप से काम नहीं करता है। यदि आप एक नोड सूची प्राप्त करते हैं और फिर नोड सूची पर पुनरावृति करने की कोशिश करते हैं, तो आप पाएंगे कि लंबाई 0. के बराबर है। सेटिंगआउट कर रहे हैं और मेरे लिए काम कर रहे 1 सेकंड की प्रतीक्षा कर रहे हैं। दुर्भाग्य से यह प्रकट नहीं होता है प्रतिक्रिया में एक विधि है जो वास्तव में डोम के प्रस्तुत होने के बाद तक इंतजार करती है।

— NickJ

Answer 2

उपयोग करने की एक खामी componentDidUpdate, या componentDidMountयह कि वे वास्तव में निष्पादित किए जाते हैं इससे पहले कि डोम तत्वों को खींचा जा रहा है, लेकिन बाद में वे रिएक्ट से ब्राउज़र के डोम में पारित हो गए हैं।

उदाहरण के लिए कहें कि यदि आपको रेंडर नोड .scrollHeight को रेंडर नोड में सेट करना है ।scrollTop, तो रिएक्ट के DOM तत्व पर्याप्त नहीं हो सकते हैं। आपको तब तक इंतजार करना होगा जब तक तत्वों को उनकी ऊंचाई पाने के लिए चित्रित नहीं किया जाता है।

समाधान:

requestAnimationFrameयह सुनिश्चित करने के लिए उपयोग करें कि आपका कोड आपकी नई प्रदान की गई वस्तु की पेंटिंग के बाद चलाया गया है

scrollElement: function() {
  // Store a 'this' ref, and
  var _this = this;
  // wait for a paint before running scrollHeight dependent code.
  window.requestAnimationFrame(function() {
    var node = _this.getDOMNode();
    if (node !== undefined) {
      node.scrollTop = node.scrollHeight;
    }
  });
},
componentDidMount: function() {
  this.scrollElement();
},
// and or
componentDidUpdate: function() {
  this.scrollElement();
},
// and or
render: function() {
  this.scrollElement()
  return [...]

Comments

window.requestAnimationFrame मेरे लिए पर्याप्त नहीं था। मुझे इसे window.setTimeout से हैक करना था। Argggghhhhhh !!!!!

— एलेक्स

अजीब। हो सकता है कि यह प्रतिक्रिया के सबसे हाल के संस्करण में बदल गया हो, मुझे नहीं लगता कि अनुरोध के लिए कॉल करना आवश्यक है। दस्तावेज़ीकरण कहता है: "घटक के अद्यतनों को DOM में फ़्लश करने के तुरंत बाद आमंत्रित किया जाता है। इस पद्धति को प्रारंभिक रेंडर के लिए नहीं कहा जाता है। इसका उपयोग DOM को संचालित करने के अवसर के रूप में करें जब घटक को अपडेट किया गया है।" ... यानी, इसे प्रवाहित किया जाता है, DOM नोड उपस्थित होना चाहिए। - facebook.github.io/react/docs/…

— जिम सोहो

@JimSoho, मुझे आशा है कि आप सही हैं कि यह तय किया गया था, लेकिन वास्तव में उस दस्तावेज में कुछ नया नहीं है। यह किनारे के मामलों के लिए है जहां डोम को अपडेट किया जाना पर्याप्त नहीं है, और यह महत्वपूर्ण है कि हम पेंट चक्र की प्रतीक्षा करें। मैंने नए संस्करणों और पुराने के साथ एक फिडेल बनाने की कोशिश की, लेकिन मैं इस मुद्दे को प्रदर्शित करने के लिए एक जटिल पर्याप्त घटक नहीं बना सका, यहां तक ​​कि कुछ संस्करणों को वापस भी ले सकता हूं ...

— ग्राहम पी हीथ

@neptunian सख्ती से बोल रहा है "[RAF] को [अगला ... से पहले बुलाया जाता है ..." - [ developer.mozilla.org/en-US/Apps/Fundamentals/Performance/… ]। इस स्थिति में नोड को अभी भी DOM (aka "reflowed") द्वारा गणना किए गए लेआउट की आवश्यकता है। यह लेआउट के बाद लेआउट से पहले कूदने के तरीके के रूप में आरएएफ का उपयोग करता है। एल्म से ब्राउज़र प्रलेखन अधिक के लिए एक अच्छी जगह है: elmprogramming.com/virtual-dom.html#how-browsers-render-html

— ग्राहम पी हीथ

_this.getDOMNode is not a functionयह कोड क्या है?

— OZZIE

Answer 3

मेरे अनुभव window.requestAnimationFrameमें यह सुनिश्चित करने के लिए पर्याप्त नहीं था कि DOM पूरी तरह से रेंडर / रिफ्लो-पूर्ण हो चुका था componentDidMount। मेरे पास कोड चल रहा है जो componentDidMountकॉल के तुरंत बाद DOM तक पहुंचता है और पूरी तरह से उपयोग करने के window.requestAnimationFrameपरिणामस्वरूप तत्व DOM में मौजूद होता है; हालाँकि, तत्व के आयामों के अपडेट अभी तक प्रतिबिंबित नहीं हुए हैं क्योंकि एक रिफ्लो अभी तक नहीं हुआ है।

काम करने के लिए इस के लिए केवल सही मायने में विश्वसनीय तरीका एक में मेरी विधि रैप करने के लिए था setTimeoutऔर एक window.requestAnimationFrameप्रतिक्रिया के मौजूदा कॉल स्टैक सुनिश्चित करने के लिए अगले फ्रेम के प्रस्तुत करना के लिए पंजीकरण से पहले मंजूरी दे दी हो जाता है।

function onNextFrame(callback) {
    setTimeout(function () {
        requestAnimationFrame(callback)
    })
}

यदि मुझे यह अनुमान लगाना था कि ऐसा क्यों हो रहा है / आवश्यक है तो मैं प्रतिक्रिया बैच डोम अपडेट देख सकता हूं और वास्तव में डोम में परिवर्तन तब तक लागू नहीं कर सकता जब तक कि वर्तमान स्टैक पूरा नहीं हो जाता।

अंततः, यदि आप उस कोड में DOM मापक का उपयोग कर रहे हैं जिसे आप प्रतिक्रिया कॉलबैक के बाद फायर कर रहे हैं तो आप शायद इस पद्धति का उपयोग करना चाहते हैं।

Comments

आपको केवल सेटटाइमआउट या अनुरोध की आवश्यकता है।

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

— इलियट चोंग

आप उपरोक्त अन्य टिप्पणियों पर ध्यान देंगे, जिनमें समान वर्कअराउंड की आवश्यकता का उल्लेख किया गया है, जिसका अर्थ है: stackoverflow.com/questions/26556436/react-after-render-code/… यह रिएक्ट यूज-केस के लिए केवल 100% विश्वसनीय तरीका है। अगर मुझे एक अनुमान लगाना था कि यह रिएक्ट बैचिंग अपडेट के कारण हो सकता है, जो कि वर्तमान स्टैक के भीतर संभावित रूप से लागू नहीं होता है (इसलिए बैच को लागू करने के लिए अगले फ्रेम के लिए requestAnimationFrame को हटा देना)।

— इलियट चोंग

मुझे लगता है कि आपको अपने JS इंटर्नल पर ब्रश करने की आवश्यकता हो सकती है ... altitudelabs.com/blog/what-is-the-javascript-event-loop stackoverflow.com/questions/8058612/…

— एलाइस चोंग

वर्तमान कॉल स्टैक के लिए प्रतीक्षा करना स्पष्ट रूप से ईवेंट लूप के बारे में बात करने के लिए एक "निरर्थक" तरीका नहीं है, लेकिन प्रत्येक अपने स्वयं के अनुमान पर ...

— इलियट चोंग

Answer 4

नए हुक विधियों के साथ इस प्रश्न को थोड़ा अद्यतन करने के लिए, आप बस useEffectहुक का उपयोग कर सकते हैं :

import React, { useEffect } from 'react'

export default function App(props) {

     useEffect(() => {
         // your post layout code (or 'effect') here.
         ...
     },
     // array of variables that can trigger an update if they change. Pass an
     // an empty array if you just want to run it once after component mounted. 
     [])
}

इसके अलावा अगर आप लेआउट पेंट से पहले useLayoutEffectहुक का उपयोग करना चाहते हैं :

import React, { useLayoutEffect } from 'react'

export default function App(props) {

     useLayoutEffect(() => {
         // your pre layout code (or 'effect') here.
         ...
     }, [])
}

Comments

रिएक्ट के प्रलेखन के अनुसार, useLayoutEffect सभी DOM म्यूटेशनों के बाद होता है ।jj.org.org

— Hebert

सच है, लेकिन यह लेआउट को पेंट करने का एक मौका है, जिसे Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.मैं संपादित करूँगा।

— पी फस्टर

क्या आपको पता है कि उपयोग होता है यदि ब्राउजर के रीफ्लो के बाद उपयोग होता है (न कि रिएक्ट 'पेंट' को क्या कहता है)? क्या किसी तत्व का स्क्रॉलहाइट के उपयोग के साथ अनुरोध करना सुरक्षित है?

— eMontielG

यह प्रयोग के लिए सुरक्षित है

— पी

Answer 5

आप राज्य को बदल सकते हैं और फिर सेटस्टेट कॉलबैक में अपनी गणना कर सकते हैं । रिएक्ट डॉक्यूमेंटेशन के अनुसार, "यह अपडेट लागू होने के बाद आग लगने की गारंटी है"।

इसे कोडर में componentDidMountया कहीं और किया जाना चाहिए (जैसे कि एक रिसाइकल इवेंट हैंडलर पर) कंस्ट्रक्टर के बजाय।

यह एक अच्छा विकल्प है window.requestAnimationFrameऔर इसमें वह समस्याएँ नहीं हैं जिनका कुछ उपयोगकर्ताओं ने यहाँ उल्लेख किया है ( setTimeoutइसे कई बार मिलाने या इसे कॉल करने की आवश्यकता है )। उदाहरण के लिए:

class AppBase extends React.Component {
    state = {
        showInProcess: false,
        size: null
    };

    componentDidMount() {
        this.setState({ showInProcess: true }, () => {
            this.setState({
                showInProcess: false,
                size: this.calculateSize()
            });
        });
    }

    render() {
        const appStyle = this.state.showInProcess ? { visibility: 'hidden' } : null;

        return (
            <div className="wrapper">
                ...
                <div className="app-content" style={appStyle}>
                    <List items={items} />
                </div>
                ...
            </div>
        );
    }
}

Comments

यह मेरा पसंदीदा उत्तर है। स्वच्छ और अच्छा मुहावरेदार प्रतिक्रिया कोड।

— फातमान 21

यह एक महान जवाब है! धन्यवाद!

— ब्रायन ज्यो हर्नग चोंग

यह सुंदर है, इस टिप्पणी को बढ़ाएं!

— bingeScripter

Answer 6

मुझे लगता है कि यह समाधान गंदा है, लेकिन यहाँ हम जाते हैं:

componentDidMount() {
    this.componentDidUpdate()
}

componentDidUpdate() {
    // A whole lotta functions here, fired after every render.
}

अब मैं बस यहां बैठने जा रहा हूं और डाउन वोटों का इंतजार कर रहा हूं।

Comments

आपको एक रिएक्ट घटक जीवनचक्र का सम्मान करना चाहिए।

— तुबाल मार्टीन

@ TúbalMartín मुझे पता है। यदि आपके पास उसी परिणाम तक पहुंचने का एक बेहतर तरीका है, तो बेझिझक साझा करें।

— जाको कारु

उम, एक आलंकारिक +1 "यहां बैठो और डाउन वोट की प्रतीक्षा करो"। बहादुर आदमी। ; ^)

— रफिन

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

— तजोरीमेरी

— पाब्लो

Answer 7

React के पास कुछ जीवनचक्र विधियाँ हैं जो इन स्थितियों में मदद करती हैं, जिनमें सूचियाँ शामिल हैं लेकिन getInitialState, getDefaultProps, ComponentsWillMount, ComponentsDidMount आदि तक सीमित नहीं हैं ।

आपके मामले में और जिन मामलों में DOM तत्वों के साथ बातचीत करने की आवश्यकता है, आपको डोम के तैयार होने तक प्रतीक्षा करने की आवश्यकता है, इसलिए नीचे दिए गए घटक का उपयोग करें:

/** @jsx React.DOM */
var List = require('../list');
var ActionBar = require('../action-bar');
var BalanceBar = require('../balance-bar');
var Sidebar = require('../sidebar');
var AppBase = React.createClass({
  componentDidMount: function() {
    ReactDOM.findDOMNode(this).height = /* whatever HEIGHT */;
  },
  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
        <div className="inner-wrapper">
          <ActionBar title="Title Here" />
          <BalanceBar balance={balance} />
          <div className="app-content">
            <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});

module.exports = AppBase;

प्रतिक्रिया में जीवनचक्र के बारे में अधिक जानकारी के लिए आप नीचे दिए गए लिंक को देख सकते हैं: https://facebook.github.io/react/docs/state-and-lifecycle.html

Comments

मेरे घटक ने पृष्ठ रेंडर करने से पहले रनों को माउंट किया, जिससे डेटा में एपीआई कॉल लोड के रूप में बड़ी देरी हुई।

— जेसन जी

Answer 8

मैं एक समस्या मे फंस गया।

हैक-ईश का उपयोग करके काम करने वाले अधिकांश परिदृश्यों setTimeout(() => { }, 0)में componentDidMount()।

लेकिन एक विशेष मामले में नहीं; और मैं ReachDOM findDOMNodeप्रलेखन के बाद से कहना नहीं चाहता था :

नोट: findDOMNode एक अंतर्निहित हैच है जिसका उपयोग अंतर्निहित DOM नोड को एक्सेस करने के लिए किया जाता है। ज्यादातर मामलों में, इस एस्केप हैच के उपयोग को हतोत्साहित किया जाता है क्योंकि यह घटक अमूर्त को छेदता है।

(स्रोत: findDOMNode )

तो उस विशेष घटक में मुझे componentDidUpdate()घटना का उपयोग करना था, इसलिए मेरा कोड इस तरह समाप्त हो गया:

componentDidMount() {
    // feel this a little hacky? check this: http://stackoverflow.com/questions/26556436/react-after-render-code
    setTimeout(() => {
       window.addEventListener("resize", this.updateDimensions.bind(this));
       this.updateDimensions();
    }, 0);
}

और तब:

componentDidUpdate() {
    this.updateDimensions();
}

अंत में, मेरे मामले में, मुझे इसमें बनाए गए श्रोता को हटाना पड़ा componentDidMount:

componentWillUnmount() {
    window.removeEventListener("resize", this.updateDimensions.bind(this));
}

Answer 9

रेंडर करने के बाद, आप नीचे की तरह ऊंचाई निर्दिष्ट कर सकते हैं और संबंधित घटकों को प्रतिक्रिया करने के लिए ऊंचाई निर्दिष्ट कर सकते हैं।

render: function () {
    var style1 = {height: '100px'};
    var style2 = { height: '100px'};

   //window. height actually will get the height of the window.
   var hght = $(window).height();
   var style3 = {hght - (style1 + style2)} ;

    return (
      <div className="wrapper">
        <Sidebar />
        <div className="inner-wrapper">
          <ActionBar style={style1} title="Title Here" />
          <BalanceBar style={style2} balance={balance} />
          <div className="app-content" style={style3}>
            <List items={items} />
          </div>
        </div>
      </div>
    );`
  }

या आप sass का उपयोग करके प्रत्येक प्रतिक्रिया घटक की ऊंचाई निर्दिष्ट कर सकते हैं। निर्दिष्ट चौड़ाई के साथ पहले 2 प्रतिक्रिया घटक मुख्य div की और फिर ऑटो के साथ तीसरे घटक मुख्य div की ऊंचाई निर्दिष्ट करें। तो तीसरे डिव की सामग्री के आधार पर ऊंचाई को सौंपा जाएगा।

Answer 10

मैं वास्तव में इसी तरह के व्यवहार से परेशान हूं, मैं एक घटक में एक वीडियो तत्व को प्रस्तुत करता हूं, जिसमें आईडी विशेषता है ताकि RenderDOM.render () समाप्त हो जाए यह एक प्लगइन को लोड करता है जिसे प्लेसहोल्डर को खोजने के लिए आईडी की आवश्यकता होती है और यह इसे खोजने में विफल रहता है।

घटक के अंदर 0ms के साथ सेटटाइमआउट () तय किया :)

componentDidMount() {
    if (this.props.onDidMount instanceof Function) {
        setTimeout(() => {
            this.props.onDidMount();
        }, 0);
    }
}

Answer 11

से ReactDOM.render () प्रलेखन:

यदि वैकल्पिक कॉलबैक प्रदान किया जाता है, तो घटक के प्रतिपादन या अद्यतन होने के बाद इसे निष्पादित किया जाएगा।

Comments

क्या आप इसका उपयोग कैसे करें का एक उदाहरण जोड़ सकते हैं? मैं ज्यादातर रेंडर विधि से तत्वों को वापस करता हूं, मैं रेंडर को कॉल नहीं करता और मान प्रदान करता हूं।

— dcsan

दुर्भाग्यवश आपके द्वारा उल्लिखित कॉलबैक केवल टॉपवेलReactDOM.render के लिए उपलब्ध है , घटक स्तर केReactElement.render लिए नहीं (जो यहाँ विषय है)।

— ब्रामुस

यहां उदाहरण सहायक होगा

— DanV

मैंने आपके उत्तर के लिंक पर क्लिक किया, और मैं आपके द्वारा उद्धृत पंक्ति नहीं खोज सका, और आपके उत्तर में इसके बिना काम करने के लिए पर्याप्त जानकारी शामिल नहीं है। कृपया एक अच्छा प्रश्न लिखने के बारे में सलाह के लिए stackoverflow.com/help/how-to-answer देखें

— बेनुबर्ड

Answer 12

मेरे लिए, लगातार परिणाम का कोई संयोजन window.requestAnimationFrameया setTimeoutउत्पादन नहीं हुआ । कभी-कभी यह काम करता था, लेकिन हमेशा नहीं - या कभी-कभी बहुत देर हो जाती।

मैंने इसे window.requestAnimationFrameआवश्यक रूप से कई बार लूप करके तय किया ।
(आमतौर पर 0 या 2-3 बार)

कुंजी यह है diff > 0: यहां हम पेज अपडेट होने पर वास्तव में सुनिश्चित कर सकते हैं।

// Ensure new image was loaded before scrolling
if (oldH > 0 && images.length > prevState.images.length) {
    (function scroll() {
        const newH = ref.scrollHeight;
        const diff = newH - oldH;

        if (diff > 0) {
            const newPos = top + diff;
            window.scrollTo(0, newPos);
        } else {
            window.requestAnimationFrame(scroll);
        }
    }());
}

Answer 13

मेरे पास अजीब स्थिति थी जब मुझे प्रतिक्रिया घटक को प्रिंट करने की आवश्यकता होती है जो कैनवास पर बड़ी मात्रा में डेटा और पेंट प्राप्त करता है। मैंने सभी उल्लिखित दृष्टिकोणों की कोशिश की है, उनमें से गैर ने मेरे लिए मज़बूती से काम किया, requestAnimationFrame के अंदर setTimeout मैं 20% समय में खाली कैनवास मिलता है, इसलिए मैंने निम्नलिखित किया:

nRequest = n => range(0,n).reduce(
(acc,val) => () => requestAnimationFrame(acc), () => requestAnimationFrame(this.save)
);

मूल रूप से मैंने अनुरोध की एक श्रृंखला बनाई है। एनिमाफ्रेम, यह सुनिश्चित नहीं है कि यह अच्छा विचार है या नहीं, लेकिन यह मेरे लिए अब तक के 100% मामलों में काम करता है (मैं n चर के मूल्य के रूप में 30 का उपयोग कर रहा हूं)।

Answer 14

अनुरोध एनीमेशनफ्रेम या टाइमआउट का उपयोग करने की तुलना में वास्तव में बहुत सरल और क्लीनर संस्करण है। Iam ने किसी को भी नहीं बताया कि वेनिला- js ऑनलोड हैंडलर है। यदि आप कर सकते हैं, तो उपयोग किए गए घटक ने माउंट किया, यदि नहीं, तो बस एक फ़ंक्शन को जेएसएक्स घटक के ऑनलोड हैंगर पर बांधें। यदि आप फ़ंक्शन को हर रेंडर चलाना चाहते हैं, तो रेंडर फ़ंक्शन में परिणाम देने से पहले इसे निष्पादित भी करें। कोड इस तरह दिखेगा:

runAfterRender = () => 
{
  const myElem = document.getElementById("myElem")
  if(myElem)
  {
    //do important stuff
  }
}

render()
{
  this.runAfterRender()
  return (
    <div
      onLoad = {this.runAfterRender}
    >
      //more stuff
    </div>
  )
}

}

Answer 15

ES6इसके बजाय कक्षाओं के साथ थोड़ा सा अपडेटReact.createClass

import React, { Component } from 'react';

class SomeComponent extends Component {
  constructor(props) {
    super(props);
    // this code might be called when there is no element avaliable in `document` yet (eg. initial render)
  }

  componentDidMount() {
    // this code will be always called when component is mounted in browser DOM ('after render')
  }

  render() {
    return (
      <div className="component">
        Some Content
      </div>
    );
  }
}

इसके अलावा - रिएक्ट घटक जीवनचक्र विधियों की जाँच करें: घटक जीवनचक्र

हर घटक में componentDidMountउदाहरण के लिए कई तरीके होते हैं ।

• componentWillUnmount() - घटक ब्राउज़र डोम से हटाया जाने वाला है

Comments

कोई अनादर नहीं, लेकिन यह सवाल का जवाब कैसे देता है? ES6 पर एक अपडेट दिखाना वास्तव में सवाल से संबंधित नहीं है / कुछ भी नहीं बदलता है। सभी पुराने उत्तर पहले से ही इस बारे में बात करते हैं कि कैसे घटकडिमाउंट अपने आप काम नहीं करता है।

— dave4jr