"কম্পোনেন্টডিডআপেটেট" পদ্ধতিটি কখন ব্যবহার করবেন?

Question

আমি কয়েক ডজন Reactফাইল লিখেছি , কখনও componentDidUpdateপদ্ধতি ব্যবহার করি না ।

এই পদ্ধতিটি কখন ব্যবহার করা দরকার তার কোনও সাধারণ উদাহরণ রয়েছে?

আমি কিছু বাস্তব-বিশ্বের উদাহরণ চাই, একটি সাধারণ ডেমো নয়।

উত্তর করার জন্য ধন্যবাদ!

Comments

developmentarc.gitbooks.io/react-indepth/content/life_cycle/...

— ইভান Trimboli

একটি সহজ কেস যখন আপনি লোডের উপর উপাদানটির প্রাথমিক অবস্থা নির্ধারণ করতে চান।

— রাজেশ

@ রাজেশ আপনি কি এটি ব্যাখ্যা করতে পারেন বা আমাকে একটি উদাহরণ দিতে পারেন? ধন্যবাদ!

— স্লাইডশোপ

আমি মনে করি সবচেয়ে সাধারণ ব্যবহার-কেসটি যখন আপনি অন্যান্য লাইব্রেরি (jQuery, D3 ...) করেন যা সরাসরি DOM এ কাজ করে, প্রতিক্রিয়াটির সাথে মিলিত হয়। এই জাতীয় পরিস্থিতিতে, অন্য লাইব্রেরিতে যদি ডিওএম রূপান্তরগুলি সম্পাদন করা প্রয়োজন হয়, আপনার রিঅ্যাক্টের ছায়া ডিওএমটি সত্যিকারের ডিওএম-এ প্রবাহিত হয়েছে তা নিশ্চিত করার জন্য আপনার উপাদানবিশেষের ডিডআপডেট ব্যবহার করা উচিত।

— জোর্জে

@ জর্জের মন্তব্যটি বিশদভাবে প্রকাশ করার জন্য: আমি মনে করি যে প্রতিক্রিয়া আপডেট হওয়ার পরে সর্বাধিক সাধারণ কেসটি রিয়েল ডম থেকে পড়তে হবে। যেমন আপনি যখন ডিওএম উপাদানগুলির সঠিক মাত্রা বা ভিউপোর্টে ডোম উপাদানগুলির অবস্থান জানতে চান। উদাহরণস্বরূপ অ্যানিমেশন বা রূপান্তরগুলি আপনি পরিচালনা করতে চান। প্রতিক্রিয়া রেন্ডার হওয়ার পরে অবশ্যই স্পষ্টভাবে ডিওএম পরিবর্তন করার জন্য jQuery ব্যবহারের বিরুদ্ধে পরামর্শ দেব। প্রতিক্রিয়া প্রকাশ করা + অন্য লাইব্রেরি একই ধরণের DOM পরিবর্তন করা একটি খারাপ ধারণা।

— উইন্ডোয়েল্ট

Answer 1

একটি সাধারণ উদাহরণ হ'ল এমন অ্যাপ্লিকেশন যা ব্যবহারকারীর কাছ থেকে ইনপুট ডেটা সংগ্রহ করে এবং তারপরে ডেটাবেজে ডেটা আপলোড করতে অ্যাজাক্স ব্যবহার করে। এখানে সরলীকৃত উদাহরণ (এটি চালানো হয়নি - সিনট্যাক্স ত্রুটি থাকতে পারে):

export default class Task extends React.Component {
  
  constructor(props, context) {
    super(props, context);
    this.state = {
      name: "",
      age: "",
      country: ""
    };
  }

  componentDidUpdate() {
    this._commitAutoSave();
  }

  _changeName = (e) => {
    this.setState({name: e.target.value});
  }

  _changeAge = (e) => {
    this.setState({age: e.target.value});
  }

  _changeCountry = (e) => {
    this.setState({country: e.target.value});
  }

  _commitAutoSave = () => {
    Ajax.postJSON('/someAPI/json/autosave', {
      name: this.state.name,
      age: this.state.age,
      country: this.state.country
    });
  }

  render() {
    let {name, age, country} = this.state;
    return (
      <form>
        <input type="text" value={name} onChange={this._changeName} />
        <input type="text" value={age} onChange={this._changeAge} />
        <input type="text" value={country} onChange={this._changeCountry} />
      </form>
    );
  }
}

সুতরাং যখনই উপাদানটির কোনও stateপরিবর্তন হবে এটি ডেটা অটোসোভ করবে। এটি প্রয়োগ করার অন্যান্য উপায়ও রয়েছে। componentDidUpdateএকটি অপারেশন ঘটনা ঘটা দরকার যখন বিশেষভাবে উপকারী হয় পরে করে DOM আপডেট করা হয় এবং আপডেট কিউ খালি করা হয়। এটি জটিল rendersএবং stateডম পরিবর্তনের ক্ষেত্রে বা আপনার যখন একেবারে শেষ করার জন্য একেবারে শেষ জিনিস হওয়ার দরকার হয় তখন এটি সবচেয়ে কার্যকর।

উপরের উদাহরণটি যদিও এর চেয়ে সহজ তবে সম্ভবত এটি প্রমাণ করে। অটোস্যাভ কার্যকর করতে পারে এমন পরিমাণ সীমাবদ্ধ করার একটি উন্নতি হতে পারে (উদাহরণস্বরূপ প্রতি 10 সেকেন্ডে সর্বোচ্চ) কারণ এখনই এটি প্রতিটি কী-স্ট্রোকে চলবে।

আমি এই ফ্রিডলটিতে একটি ডেমো তৈরি করেছি পাশাপাশি প্রদর্শন করতে পারি।

---

আরও তথ্যের জন্য, সরকারী দস্তাবেজগুলি দেখুন :

componentDidUpdate()আপডেট হওয়ার সাথে সাথেই অনুরোধ করা হয়। এই পদ্ধতিটি প্রাথমিক রেন্ডার জন্য ডাকা হয় না।

উপাদানটি আপডেট হয়ে গেলে DOM এ পরিচালনা করার সুযোগ হিসাবে এটি ব্যবহার করুন। নেটওয়ার্কের অনুরোধগুলি করার জন্য এটি একটি ভাল জায়গা যতক্ষণ আপনি পূর্ববর্তী প্রপসের সাথে বর্তমান প্রপাদের তুলনা করেন (উদাহরণস্বরূপ প্রপস পরিবর্তন না করা থাকলে নেটওয়ার্ক অনুরোধের প্রয়োজন হতে পারে না)।

Comments

আমি মনে করি this.setState({...}, callback), callbackসমান _commitAutoSave, আপনি কি মনে করেন? সুতরাং, আমি মনে করি এই মামলাটি componentDidUpdateপদ্ধতি ব্যবহার করতে পারে তবে তা করা উচিত নয়, আমি কি ঠিক আছি? ভাজা

— স্লাইডশোপ

হ্যাঁ, আপনি একটি কলব্যাক ব্যবহার করতে পারেন, তবে উত্তরসূরীতে চালিত একাধিক সেটস্টেট থাকলে / সমস্যাটি আরও জটিল হয়।

— ক্রিস

আপনার উত্তরের জন্য ধন্যবাদ. সুতরাং, ব্যবহারের componentDidUpdateজন্য একটি কেস একাধিক সেটস্টেটগুলি সমাধান করা! অন্য কোন ধারণা?

— স্লাইডশোপ

@ নোভালাইন আমি দেখতে পাচ্ছি যে তারা এটিকে রিঅ্যাক্ট সাউন্ড উপাদান github.com/leoasis/react-sound/blob/master/src/index.js এ ব্যবহার করছে আমি জানি না কেন তারা এটি ব্যবহার করছে তবে আমি ভেবেছিলাম একবার দেখার জন্য লিংকটি ভাগ করুন।

— সারা

এটি একটি ভাল উদাহরণ, তবে এটি প্রতিক্রিয়া ডক্সের একটি মূল প্রস্তাবনা অনুপস্থিত। "যতক্ষণ না আপনি প্রপসগুলি পূর্ববর্তী প্রপসের সাথে তুলনা করেন ততক্ষণ নেটওয়ার্ক অনুরোধগুলি করার পক্ষে এটি একটি ভাল জায়গা (যেমন প্রপস পরিবর্তন না হলে নেটওয়ার্ক অনুরোধের প্রয়োজন হতে পারে না)।" reactjs.org/docs/react-component.html#compenderdidupdate একইভাবে, যখনই setStateসিডিইউতে কল করা হয় শর্তসাপেক্ষ যুক্তি দিয়ে কলটি মোড়ানো উচিত ।

— দ্য ইউথারসাইড

Answer 2

কখনও কখনও আপনি কন্সট্রাক্টর বা উপাদান ডিডমাউন্টে প্রপস থেকে একটি রাষ্ট্রীয় মান যুক্ত করতে পারেন, যখন প্রপস পরিবর্তিত হয় তখন আপনাকে সেটস্টেট কল করতে হতে পারে তবে উপাদানটি ইতিমধ্যে মাউন্ট করেছে তাই কম্পোনেন্টডিডমাউন্ট কার্যকর হবে না এবং নির্মাণকারীও করবে না; প্রপস পরিবর্তিত হওয়ার পরে আপনি এই বিশেষ ক্ষেত্রে কন্টেন্টডিডআপডেট ব্যবহার করতে পারবেন, আপনি নতুন প্রোপস সহ উপাদান উপাদানডিডআপটে সেটস্টেটটি কল করতে পারবেন।

Answer 3

আমি componentDidUpdate()হাইচার্টে ব্যবহার করেছি।

এই উপাদানটির একটি সাধারণ উদাহরণ এখানে।

import React, { PropTypes, Component } from 'react';
window.Highcharts = require('highcharts');

export default class Chartline extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      chart: ''
    };
  }

  public componentDidUpdate() {
    // console.log(this.props.candidate, 'this.props.candidate')
    if (this.props.category) {
      const category = this.props.category ? this.props.category : {};
      console.log('category', category);
      window.Highcharts.chart('jobcontainer_' + category._id, {
        title: {
          text: ''
        },
        plotOptions: {
          series: {
            cursor: 'pointer'
          }
        },
        chart: {
          defaultSeriesType: 'spline'
        },
        xAxis: {
          // categories: candidate.dateArr,
          categories: ['Day1', 'Day2', 'Day3', 'Day4', 'Day5', 'Day6', 'Day7'],
          showEmpty: true
        },
        labels: {
          style: {
            color: 'white',
            fontSize: '25px',
            fontFamily: 'SF UI Text'
          }
        },
        series: [
          {
            name: 'Low',
            color: '#9B260A',
            data: category.lowcount
          },
          {
            name: 'High',
            color: '#0E5AAB',
            data: category.highcount
          },
          {
            name: 'Average',
            color: '#12B499',
            data: category.averagecount
          }
        ]
      });
    }
  }
  public render() {
    const category = this.props.category ? this.props.category : {};
    console.log('render category', category);
    return <div id={'jobcontainer_' + category._id} style={{ maxWidth: '400px', height: '180px' }} />;
  }
}

Answer 4

componentDidUpdate(prevProps){ 

    if (this.state.authToken==null&&prevProps.authToken==null) {
      AccountKit.getCurrentAccessToken()
      .then(token => {
        if (token) {
          AccountKit.getCurrentAccount().then(account => {
            this.setState({
              authToken: token,
              loggedAccount: account
            });
          });
        } else {
          console.log("No user account logged");
        }
      })
      .catch(e => console.log("Failed to get current access token", e));

    }
}

Answer 5

এই লাইফসাইकल পদ্ধতিটি আপডেট হওয়ার সাথে সাথেই অনুরোধ করা হয়। কম্পোনেন্টডিডআপেট () পদ্ধতির জন্য সর্বাধিক সাধারণ ব্যবহারের ক্ষেত্রটি প্রম বা রাষ্ট্রের পরিবর্তনের প্রতিক্রিয়ায় ডিওএম আপডেট করে।

আপনি এই লাইফসাইকেলে সেটস্টেট () কল করতে পারেন, তবে মনে রাখবেন যে আপনার পূর্ববর্তী অবস্থা থেকে রাষ্ট্র বা প্রপস পরিবর্তনগুলি যাচাই করার জন্য আপনাকে এটিকে আবদ্ধ করতে হবে। সেটস্টেটের ভুল ব্যবহার () অসীম লুপকে ডেকে আনতে পারে। নীচের উদাহরণটি দেখুন যা এই জীবনচক্র পদ্ধতির একটি সাধারণ ব্যবহারের উদাহরণ দেখায়।

componentDidUpdate(prevProps) {
 //Typical usage, don't forget to compare the props
 if (this.props.userName !== prevProps.userName) {
   this.fetchData(this.props.userName);
 }
}

উপরের উদাহরণে লক্ষ্য করুন যে আমরা বর্তমান প্রপসগুলি আগের প্রপসের সাথে তুলনা করছি। এটি এখন যা আছে সেগুলি থেকে প্রপসগুলিতে কোনও পরিবর্তন হয়েছে কিনা তা পরীক্ষা করা উচিত। এই ক্ষেত্রে, প্রপস পরিবর্তন না হলে এপিআই কল করার প্রয়োজন হবে না।

আরও তথ্যের জন্য, সরকারী দস্তাবেজগুলি দেখুন:

Comments

ক্ষেত্রে কি করতে হবে this.fetchData is not a function?

— tomrlh

tomrlh এটি একটি ফাংশন কল

— কাশিফ

Answer 6

যখন রাজ্যের কোনও কিছু বদলে গেছে এবং আপনাকে একটি পার্শ্ব প্রতিক্রিয়া কল করতে হবে (এপিআই-র অনুরোধের মতো - পেতে, রাখুন, পোস্ট করুন, মুছুন)। সুতরাং আপনাকে কল করা প্রয়োজন componentDidUpdate()কারণ componentDidMount()ইতিমধ্যে কল করা হয়েছে।

কম্পোনেন্টডিডআপেটে () এর পার্শ্ব প্রতিক্রিয়া বলার পরে, আপনি এর মধ্যে প্রতিক্রিয়া তথ্যের উপর ভিত্তি করে রাজ্যটিকে নতুন মান হিসাবে সেট করতে পারেন then((response) => this.setState({newValue: "here"}))। দয়া করে নিশ্চিত হয়ে নিন যে আপনার চেক করা prevPropsবা prevStateঅসীম লুপ এড়াতে হবে কারণ যখন কোনও নতুন মান স্থিতি স্থাপন করার সময়, উপাদানটিডআইপিপেট () আবার কল করবে।

সেরা অনুশীলনের জন্য একটি পার্শ্ব প্রতিক্রিয়া কল করার জন্য 2 টি জায়গা রয়েছে - উপাদানডিডমাউন্ট () এবং উপাদানডিডআপ্পেট ()