এস 6 ক্লাস ব্যবহার করার সময় প্রতিক্রিয়াতে "সুপার ()" এবং "সুপার (প্রপস)" এর মধ্যে পার্থক্য কী?

Question

কখন পাস propsকরা গুরুত্বপূর্ণ super(), এবং কেন?

class MyComponent extends React.Component {
  constructor(props) {
    super(); // or super(props) ?
  }
}

Comments

একটি ভাল ব্যাখ্যাও পাওয়া যাবে overreacted.io/why-do-we-writ-super- ফসলগুলিতে

— অমিতেশ

Answer 1

শুধুমাত্র একটি কারণ যখন কারও কাছে propsযেতে হয় super():

আপনি যখন this.propsকনস্ট্রাক্টর অ্যাক্সেস করতে চান ।

পাসিং:

class MyComponent extends React.Component {    
    constructor(props) {
        super(props)

        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

পাস হচ্ছে না:

class MyComponent extends React.Component {    
    constructor(props) {
        super()

        console.log(this.props)
        // -> undefined

        // Props parameter is still available
        console.log(props)
        // -> { icon: 'home', … }
    }

    render() {
        // No difference outside constructor
        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

লক্ষ্য করুন ক্ষণস্থায়ী বা না ক্ষণস্থায়ী propsকরতে superহয়েছে কোনো প্রভাব পরবর্তী ব্যবহারের উপর this.propsবাহিরে constructor। এটি হ'ল render, shouldComponentUpdateবা ইভেন্ট হ্যান্ডলাররা সর্বদা অ্যাক্সেস থাকে।

এটি একটি একই প্রশ্নের উত্তরে সোফি আল্পার্টের স্পষ্ট করে বলা হয়েছে ।

---

Documentation- রাজ্য এবং লাইফ সাইকল, একটি ক্লাস, পয়েন্ট 2 স্থানীয় রাজ্য যোগ করার পদ্ধতি -recommends:

ক্লাস উপাদানগুলি সর্বদা সাথে বেস কনস্ট্রাক্টরকে কল করা উচিত props।

তবে, কোনও কারণ সরবরাহ করা হয়নি। আমরা অনুমান করতে পারি এটি হয় সাবক্লাসিংয়ের কারণে বা ভবিষ্যতের সামঞ্জস্যের কারণে।

(লিঙ্কটির জন্য ধন্যবাদ @ ম্যাটব্রাউন)

Comments

আমি মনে করি আপনি সঠিক, অন্য উত্তর সত্ত্বেও আরও বেশি ভোট পেয়েছে। this.propsহয় undefinedযদি না পাস super()। উভয় ক্ষেত্রেই, এটা পরে রেন্ডারিং বা প্রাপ্যতা প্রভাবিত করে না this.propsযে render()ফাংশন।

— মাইক্রোস 11

@ রোটেরেটি, না, আসলে ক্লাসের বাকী অংশগুলি এই নির্মাণের উপর নির্ভর করে না, এটিই মূল বিষয়। কম্পোনেন্টগুলি কনস্ট্রাক্টর পরামিতি দ্বারা ভিন্নভাবে প্রপস গ্রহণ করে receives এবং যেহেতু আপনি প্রাথমিক প্রপসগুলিতে পাস superকরেন তাই আপনার কনস্ট্রাক্টরে রেফারেন্স রয়েছে।

— রবিন পোকর্নি

প্রতিক্রিয়া ডকুমেন্টেশন অনুসারে আপনার সর্বদা : facebook.github.io/react/docs/… এprops পাঠানো উচিত । আমি নিশ্চিত না কেন, যেহেতু আপনি উল্লেখ করেছেন যে কোনওভাবেই অন্য পদ্ধতিতে অ্যাক্সেসযোগ্য ... সম্ভবত তারা ভবিষ্যতের সামঞ্জস্যের জন্য এটি প্রস্তাব দিচ্ছেন যদি ভবিষ্যতের প্রতিক্রিয়াগুলি কনস্ট্রাক্টরের সাথে কিছু করতে চান ? super()this.propsprops

— ম্যাট ব্রাউনি 13

হয়তো আমি শুধু এখানে কৃমি একটি পারেন খোলার, কিন্তু কেন কি কখনো পাস propsকরার superযখন, যেমন আপনি নির্দিষ্ট, propsপরামিতি অধিকার আছে উপলব্ধ আমাদের কন্সট্রাকটর মধ্যে ব্যবহারের জন্য , এবং this.propsসর্বত্র অন্য কাজ করে? this.propsশুধু মাত্র ওভার ব্যবহার করে কি কোনও উপকার হয় props? এটি কি propsকনস্ট্রাক্টরের মধ্যে ডেস্ট্রাকচার বন্ধ করা খারাপ অভ্যাস ? আমি মনে করি আমি এখনও কোনও মামলাটি দেখতে ব্যর্থ হয়েছি যখন আপনার কখন পাস propsকরার প্রয়োজন হয় superতবে আমি বাজি রাখতে ইচ্ছুক এটি কেবল আমার অজ্ঞতা, হা।

— indiesquidge

আপনি যদি ব্যবহার করেন তবে আপনি super(props)সেই পদ্ধতিগুলিকে কল করতে পারেন যা this.props কনস্ট্রাক্টর থেকে ব্যবহার করা হয় , যেমন this.doStuffUsingThisDotProps(), সেই পদ্ধতিগুলি / ক্রিয়াকলাপগুলিতে প্রপস পরামিতিটি ছাড়াই। আমি কেবল এটির একটি নির্মাণকারী লিখেছি, যা সম্ভবত super(props)এই প্রশ্নের উত্তর অনুসারে আমাকে প্রথমে ব্যবহার করা প্রয়োজন ।

— ভিক্টর জামানমিয়ান

Answer 2

এই উদাহরণে, আপনি React.Componentক্লাসটি প্রসারিত করছেন , এবং ES2015 অনুমান অনুসারে, একটি শিশু শ্রেণির নির্মাতা কল thisনা super()করা পর্যন্ত ব্যবহার করতে পারবেন না ; এছাড়াও, ES2015 শ্রেণি নির্মাতারা super()যদি সাবক্লাস হয় তবে তাদের কল করতে হবে।

class MyComponent extends React.Component {
  constructor() {
    console.log(this); // Reference Error
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

বিপরীতে:

class MyComponent extends React.Component {
  constructor() {
    super();
    console.log(this); // this logged to console
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

হিসাবে আরও বিশদ এই দুর্দান্ত স্ট্যাক ওভারফ্লো উত্তর

আপনি React.Componentক্লাস না করে ক্লাস বাড়িয়ে তৈরির উপাদানগুলির উদাহরণ দেখতে পাচ্ছেন তবে আপনি দেখতে পাবেন যে super()এগুলির একটি নেই constructor, সুতরাং এটি কেন প্রয়োজনীয় নয়।

class MyOtherComponent extends React.Component {
  render() {
    return <div>Hi {this.props.name}</div>;
  }
}

আমি যে কথোপকথনটির সাথে কথা বলেছি তার মধ্যে একটি বিভ্রান্তির বিষয়টি আমি দেখেছি যে যে উপাদানগুলি নেই constructorএবং তাই super()কোথাও কল করে না, এখনও পদ্ধতিটিতে this.propsউপলব্ধ the render()মনে রাখবেন যে এই নিয়ম এবং thisএটি constructorকেবলমাত্রর জন্য প্রযোজ্য জন্য একটি বাধ্যতামূলক তৈরি করা প্রয়োজন constructor।

Comments

আপনার উত্তরের জন্য অনেক ধন্যবাদ, তবে এটি আমার মূল প্রশ্নের উত্তর দেয় না ( super()এবং এর মধ্যে পার্থক্য super(props))।

— মিশা মোরোস্কো

Answer 3

আপনি যখন পাস propsকরার super, সাজসরঞ্জাম নির্ধারিত পেতে this। নিম্নলিখিত পরিস্থিতিতে একবার দেখুন:

constructor(props) {
    super();
    console.log(this.props) //undefined
}

আপনি কখন কখন করবেন:

constructor(props) {
    super(props);
    console.log(this.props) //props will get logged.
}

Comments

তালিকার সেরা উত্তর।

— বাসভরাজ হাদিমনি

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

— Ofear

Answer 4

অনুযায়ী সোর্স কোড

function ReactComponent(props, context) {
  this.props = props;
  this.context = context;
}

আপনার প্রপস থাকা propsপ্রতিটি সময় আপনাকে অবশ্যই পাস করতে হবে এবং আপনি এগুলি this.propsম্যানুয়ালি putোকাতে পারবেন না ।

Comments

আমি এখনও এই বিষয়ে পরিষ্কার না। আপনি যদি এই দুটি উপাদানটি দেখে থাকেন তবে আপনি একটি কল দেখতে পারবেন super(props)এবং অন্যটি তা করবে না। তবে তাদের গ্রাহকরা উভয়ই প্রপস সেট করে। পার্থক্য কি?

— কায়োটিক

এর অর্থ কি this.props = propsএবং super(props)একই জিনিস?

— রেকট্রিক্স

এটি সত্য নয়। রিঅ্যাক্টেলমেন্ট আসলে this.props'বাহিরের' থেকে নির্ধারণ করে the নির্মাত্রে যা করা হয় তা নির্বিশেষে।

— রবিন পোকর্নি

Answer 5

ড্যান আব্রামভ এই বিষয়ে একটি নিবন্ধ লিখেছিলেন:

কেন আমরা সুপার (প্রপস) লিখি?

এবং এর সংক্ষিপ্তসারটি হ'ল এই দৃশ্যটি এড়াতে এটি পাস করার অভ্যাস থাকা সহায়ক , সত্যই, আমি এটি ঘটনার সম্ভাবনা দেখছি না:

// Inside React
class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

// Inside your code
class Button extends React.Component {
  constructor(props) {
    super(); // 😬 We forgot to pass props
    console.log(props);      // ✅ {}
    console.log(this.props); // 😬 undefined 
  }
  // ...
}

Answer 6

super() প্যারেন্ট কনস্ট্রাক্টরকে কল করতে ব্যবহৃত হয়।

super(props) পাস হবে propsঅভিভাবক কনস্ট্রাক্টর ।

আপনার উদাহরণ থেকে, কনস্ট্রাক্টরকে প্রবেশ করানো super(props)কল করবেReact.Componentprops আর্গুমেন্ট হিসাবে ।

এ সম্পর্কিত আরও তথ্য super: https://developer.mozilla.org/en-US/docs/Web/ জাভা স্ক্রিপ্ট / রেফারেন্স / অপারেটরস / সুপার

Comments

হ্যাঁ, এটিই তাই করে। তবে কেন ? এবং প্রতিক্রিয়াতে দুটি ফর্মগুলির মধ্যে একটি কখন প্রয়োজনীয়?

— বার্গি

Answer 7

বাস্তবায়ন করার সময় constructor() একটি প্রতিক্রিয়া উপাদান ভিতরে ফাংশন , super()একটি প্রয়োজন। মনে রাখবেন যে আপনার MyComponentউপাদানটি React.Componentবেস বর্গ থেকে কার্যকারিতা প্রসারিত বা ধার করছে ।

এই বেস শ্রেণীর নিজস্ব একটি constructor()ফাংশন রয়েছে যা এর অভ্যন্তরে কিছু কোড থাকে যা আমাদের জন্য আমাদের প্রতিক্রিয়া উপাদান সেটআপ করে।

যখন আমরা constructor()আমাদের ভিতরে কোনও ফাংশন সংজ্ঞায়িত করিMyComponent ক্লাসের ক্লাসের থাকা constructor()ফাংশনটি ওভাররাইডিং বা প্রতিস্থাপন করি React.Component, তবে আমাদের এখনও নিশ্চিত করতে হবে যে এই constructor()ফাংশনের ভিতরে থাকা সমস্ত সেটআপ কোডটি এখনও কল করে।

সুতরাং React.Componentএর constructor()কার্যকারিতাটি কল হয়ে গেছে তা নিশ্চিত করার জন্য , আমরা কল করিsuper(props) । super(props)পিতামাতার constructor()ফাংশনের একটি রেফারেন্স , এটাই সব।

আমরা যোগ করতে হবে super(props) প্রতি একক সময় সংজ্ঞায়িত করতে হবেconstructor() একটি বর্গ ভিত্তিক উপাদান ভিতরে ফাংশন।

আমরা যদি তা না করি তবে আমাদের কল করতে হবে এমন একটি ত্রুটি দেখতে পাবে super(props) ।

এটি সংজ্ঞায়িত করার পুরো কারণ constructor() ফানসিটনের দেওয়ার হ'ল আমাদের রাষ্ট্রীয় অবজেক্টটি আরম্ভ করা।

সুতরাং আমাদের রাষ্ট্রের অবজেক্টটি সূচনা করতে, সুপার কলের নীচে আমি লিখছি:

class App extends React.Component {
  constructor(props) {
      super(props);

      this.state = {};
   }

  // React says we have to define render()
  render() {
    return <div>Hello world</div>;
  }
};

সুতরাং আমরা আমাদের constructor()পদ্ধতিটি সংজ্ঞায়িত করেছি , একটি জাভাস্ক্রিপ্ট অবজেক্ট তৈরি করে আমাদের রাষ্ট্রীয় অবজেক্টটি সূচনা করেছি, এর জন্য কোনও সম্পত্তি বা কী / মান জুটি নির্ধারণ করে, এর ফলাফল নির্ধারণ করে this.state। এখন অবশ্যই এটি এখানে একটি উদাহরণ তাই আমি সত্যিকার অর্থে কোনও কী / মান জোড় রাষ্ট্রীয় বস্তুকে অর্পণ করি নি, এটি কেবল একটি খালি অবজেক্ট।

Answer 8

এখানে আমি তৈরি করা ঝাঁকুনি : jsfiddle.net । এটি দেখায় যে প্রপস ডিফল্টরূপে কনস্ট্রাক্টরে নেই। আমি বুঝতে পারি যে তারা পদ্ধতিতে অনুগ্রহ করে React.createElement। অতএব super(props)কেবল যখন সুপারক্লাসের নির্মাতা নিজে নিজেই প্রতিশ্রুতি propsদেয় তখনই ডাকা উচিত this.props। আপনি যদি কেবল প্রসারিত করেন তবে React.Componentকলগুলি super(props)প্রপস সহ কিছুই করবে না। সম্ভবত এটি প্রতিক্রিয়াটির পরবর্তী সংস্করণগুলিতে পরিবর্তন করা হবে।

Answer 9

এখানে আমরা এটি কনস্ট্রাক্টরে পাবেন না যাতে এটি অপরিবর্তিত ফিরে আসবে তবে আমরা এটি নির্মাণকারীর কার্যের বাইরে আনতে সক্ষম হব

class MyComponent extends React.Component {
  constructor() {
    console.log(this); // Reference Error i.e return undefined
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

যদি আমরা সুপার () ব্যবহার করি তবে আমরা কনস্ট্রাক্টরের ভিতরে "এই" ভেরিয়েবলটি আনতে পারি can

class MyComponent extends React.Component {
  constructor() {
    super();
    console.log(this); // this logged to console
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

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

যদি আমরা সুপার (প্রপস) ব্যবহার করি তবে আমরা কনস্ট্রাক্টরের ভিতরেও এই ফসলের মানটি ব্যবহার করতে পারি

সোফি আল্পার্টের উত্তর

আপনি যদি কন্সট্রাক্টরে এই.পড়গুলি ব্যবহার করতে চান তবে আপনাকে সুপারকে প্রপসগুলি সরবরাহ করতে হবে। অন্যথায়, এটি কোনও ব্যাপার নয় কারণ প্রতিক্রিয়াটি কনস্ট্রাক্টরকে কল করার সাথে সাথে বাইরে থেকে উদাহরণস্বরূপ ফসল সেট করে।

Answer 10

সংস্করণ 16.6.3 এর প্রতিক্রিয়াটির জন্য, আমরা রাষ্ট্রের উপাদানটির নাম আরম্ভ করার জন্য সুপার ( প্রস ) ব্যবহার করি : এই.পড়গুলি.নাম

constructor(props){
    super(props);        
}
state = {
  name:this.props.name 
    //otherwise not defined
};