প্রপস থেকে উপাদান আরম্ভের প্রতিক্রিয়া জানান

Question

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

প্রথম:

import React, { PropTypes } from 'react'

class FirstComponent extends React.Component {

  state = {
    description: ''
  }

  componentDidMount() {
    const { description} = this.props;
    this.setState({ description });
  }

  render () {
    const {state: { description }} = this;    
    return (
      <input type="text" value={description} /> 
    );
  }
}

export default FirstComponent;

দ্বিতীয়ত:

import React, { PropTypes } from 'react'

class SecondComponent extends React.Component {

  state = {
    description: ''
  }

  constructor (props) => {
    const { description } = props;
    this.state = {description};
  }

  render () {
    const {state: { description }} = this;    
    return (
      <input type="text" value={description} />   
    );
  }
}

export default SecondComponent;

আপডেট: আমি সেটস্টেট () কে এই স্টেটে = {} (ধন্যবাদ জোউজ) এ পরিবর্তন করেছি, তবে আমি এখনও তফাতটি দেখছি না। একজন কি অন্যের চেয়ে ভাল?

Comments

আপনি কেন রাজ্যে আপনার প্রপস সংরক্ষণ করছেন? কোনও মান ক্যাশে করার পরিবর্তে আপনার সরাসরি প্রপস ব্যবহার করা উচিত। একটি পড়া আছে কেন React.js মধ্যে রাজ্য হিসাবে সাজসরঞ্জাম সেট ব্লাসফেমি হয় এবং সাজসরঞ্জাম getInitialState একটি এন্টি-প্যাটার্ন ।

— অরোরা 10001

একটি উদাহরণ - একটি টগলযোগ্য উপাদান (যেমন একটি পপওভার বা ড্রয়ার)। পিতা-মাতা জানেন যে উপাদানটি খোলা বা বন্ধ হওয়া উচিত; উপাদানটি নিজেই জানতে পারে এটি সময়মতো খোলা আছে কি না। সেক্ষেত্রে আমার this.state = { isVisible: props.isVisible }ধারণাটি বোধগম্য হয়। অ্যাপটি কীভাবে ইউআই স্থিতি বিতরণ করে তা নির্ভর করে।

— জুইস

আপনি এই পড়া উচিত medium.com/@justintulk/...

— fdisk

: 2017, ফেসবুক তাদের ডকুমেন্টেশনে প্রাথমিক অবস্থায় সেট করতে সাজসরঞ্জাম ব্যবহার প্রমান reactjs.org/docs/react-component.html#constructor

— Rohmer

@ অররাও 10001 এমন পরিস্থিতিতে যেখানে আপনার কোনও ফর্ম হ্যান্ডেল করা দরকার, এমন একটি সম্পাদনা ফর্ম বলুন যা এটি নিজস্ব নেটওয়ার্ক অনুরোধ করবে তবে আপনাকে সেই মানগুলির সাথে ইনপুটগুলি আরম্ভ করতে হবে যা সেই উপাদানটির প্রপস হিসাবে আসতে পারে। ফর্মটি গতিশীল রাখার জন্য, সেই মানগুলি রাখতে হবে।

— এরিক ম্যাকউইনএন

Answer 1

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

class FirstComponent extends React.Component {
  state = {
    x: this.props.initialX,
    // You can even call functions and class methods:
    y: this.someMethod(this.props.initialY),
  };
}

এটি নীচে @ জিউস থেকে উত্তরের সংক্ষিপ্ত আকার। এটি কেবলমাত্র এসআই 6 ট্রান্সপোর্টারগুলির সাম্প্রতিক সংস্করণগুলিতে কাজ করছে বলে মনে হচ্ছে, কিছু ওয়েবপ্যাক সেটআপে আমার এটি নিয়ে সমস্যা হয়েছে। যদি এটি আপনার পক্ষে কাজ করে না, আপনি বাবেল প্লাগইন যুক্ত করার চেষ্টা করতে পারেন babel-plugin-transform-class-properties, বা আপনি নীচে @ জোইউজ দ্বারা অ-শর্টহ্যান্ড সংস্করণটি ব্যবহার করতে পারেন।

Comments

আপনার উত্তরটি কীভাবে উত্তর জওসের উত্তর থেকে আলাদা তা আপনি আরও ব্যাখ্যা করতে পারেন?

— জালাল

যোগ করা হয়েছে "আপনি যা করছেন সব ভেরিয়েবল সেট করে দিলে আপনি কনস্ট্রাক্টর কলটি এড়িয়ে যেতে পারেন" "

— জেন হুপার

যদি এটি কাজ না করে তবে সম্ভবত আপনার এই ব্যাবেল প্লাগইন "বাবেল-প্লাগ-ইন-ট্রান্সফর্ম-ক্লাস-প্রপার্টি" ইনস্টল করতে হবে।

— ফাহিম

প্রপস থেকে রাষ্ট্রের সূচনা করা কোনও বিরোধী-নিদর্শন নয়, যদি বোঝা যায় যে প্রারম্ভিককরণের পরে রাজ্যগুলি প্রপসের উপর নির্ভর করে না। আপনি যদি দুজনকে সমন্বয় করার চেষ্টা করছেন তবে এটি একটি বিরোধী-নিদর্শন।

— ইয়াাত্রিক্স

@ ak85 এটি একই বাক্য গঠন তবে আপনি এটি পরিবর্তে এই স্টেট ব্যবহার করবেন। শ্রেণিবদ্ধ প্রক্রিয়া চলাকালীন রাষ্ট্র নির্ধারণের জন্য এই বাক্য গঠনটি কেবল একটি সংক্ষিপ্ত বাক্য গঠন (এবং এটি রাজ্য ব্যতীত অন্য

— চলকগুলির

Answer 2

আপনাকে setStateকোনও কম্পোনেন্টে কল করার দরকার নেই constructor- এটি this.stateসরাসরি সেট করা ইডিয়োমেটিক :

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      x: props.initialX
    };
  }
  // ...
}

প্রতিক্রিয়া দস্তাবেজগুলি দেখুন - একটি শ্রেণিতে স্থানীয় রাজ্য যুক্ত করা ।

আপনার বর্ণিত প্রথম পদ্ধতির কোনও সুবিধা নেই। এটি প্রথমবারের জন্য উপাদানটি মাউন্ট করার সাথে সাথেই দ্বিতীয় আপডেটে নেমে আসবে।

Comments

ভাল উত্তর. এটি লক্ষ্য করার মতো হতে পারে যে এটি কেবলমাত্র প্রাথমিক অবস্থা নির্ধারণের জন্য; আপনি setStateঅন্য যে কোনও মুহুর্তে এটিকে রূপান্তর করলে আপনার এখনও প্রয়োজন হয় , অন্যথায় পরিবর্তনগুলি রেন্ডার নাও করতে পারে।

— অরোরা 10001

ধন্যবাদ পুনরায় jowes, দ্বিতীয় ডকুমেন্টেশন ফেসবুক.

— লেভি মোরিরা

(দুঃখিত আমি লিখুন টিপুন ..) আরও জটিল কাজগুলিতে প্রপসগুলি সেট করার জন্য আমাদের getInitialState ব্যবহার করা উচিত, যদি সহজ হয় তবে আমরা এইটি ব্যবহার করতে পারি, রেন্ডারগুলিতে সঠিক, সঠিক?

— লেভি মোরিরা

প্রান্তিক নোটে: super(props)কনস্ট্রাক্টরটিতে ব্যবহার করুন। এসও নিয়ে আলোচনা

— কিউটমাচাইন

জিউসের পরামর্শ বেশিরভাগ ক্ষেত্রেই কার্যকর হয় তবে সরাসরি এটি.স্টেটে প্রপস পাঠানোর বিষয়ে সতর্ক থাকুন। এই.স্টেটে প্রপস অনুলিপি করা আসলে সত্যের একক উত্স ( মাঝারি / বাস্তব )- বাস্তুতন্ত্র / ......... )। এছাড়াও, ড্যান আব্রামভ একবার পরামর্শ দিয়েছিলেন যে 'প্রপস' স্টোর স্টোর না করে in ( twitter.com/dan_abramov/status/749710501916139520/photo/1 )।

— হিরোকি

Answer 3

প্রতিক্রিয়া হিসাবে 16.3 আলফা প্রবর্তিত static getDerivedStateFromProps(nextProps, prevState)( ডক্স ) এর জন্য আপডেটcomponentWillReceiveProps ।

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

মনে রাখবেন যে কোনও পিতামন্ডল উপাদান যদি আপনার উপাদানটিকে পুনরায় রেন্ডার করায় তবে প্রপস পরিবর্তন না হলেও এই পদ্ধতিটি কল করা হবে। আপনি যদি কেবলমাত্র পরিবর্তনগুলি পরিচালনা করতে চান তবে আপনি নতুন এবং পূর্ববর্তী মানগুলির তুলনা করতে চাইতে পারেন।

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

এটি স্থিতিশীল, অতএব এটিতে সরাসরি অ্যাক্সেস নেই this(তবে এটির অ্যাক্সেস রয়েছে prevStateযা সাধারণত thisউদাহরণস্বরূপ সংযুক্ত জিনিসগুলি সঞ্চয় করতে পারে refs)

মন্তব্যে @ nerfologist এর সংশোধন প্রতিবিম্বিত করতে সম্পাদিত

Comments

শুধু নির্মল, এটা নামে এর getDerivedStateFromProps(সাজসরঞ্জাম মধ্যে বড় হাতের অক্ষর চিহ্নিত) এবং প্যারাম হয় nextProps, prevState(না nextState): reactjs.org/docs/...

— nerfologist

কি দারুন! আপডেট প্রপস পাওয়া গেলে আমরা রাষ্ট্র আপডেট করতে এটি ব্যবহার করতে পারি !

— অরোমল সসিধরন

getDerivedStateFromPropsপ্রাথমিক রেন্ডারিংয়ের আগে সর্বদা ডাকা হয় বলে বিবেচনা করে আমাদের কি এখনও কনস্ট্রাক্টারে প্রাথমিক অবস্থা তৈরি করতে হবে ?

— বিভিডিবি

Answer 4

আপনি নীচের মতো সংক্ষিপ্ত ফর্মটি ব্যবহার করতে পারেন যদি আপনি সমস্ত প্রপস যুক্ত করতে এবং একই নামগুলি বজায় রাখতে চান।

constructor(props) {
    super(props);
    this.state = {
       ...props
    }
    //...
}

Comments

এটি এমন বৈশিষ্ট্যগুলি অনুলিপি করার জন্য একটি বিরোধী-নিদর্শন যা কখনও রাজ্যে পরিবর্তন হয় না। আপনার উপাদানটি কোন ক্ষেত্রগুলি ব্যবহার করে তা স্পষ্টভাবে বর্ণনা করা ভাল।

— মাইকেল ফ্রেইজিম

Answer 5

এই জাতীয় কনস্ট্রাক্টরের ভিতরে রাজ্য ডেটা সেট করুন

constructor(props) {
    super(props);
    this.state = {
      productdatail: this.props.productdetailProps
    };
  }

প্রপসের মাধ্যমে আপনি সাইড কম্পোনেন্টডিডমাউন্ট () পদ্ধতিতে সেট করে থাকলে এটি কাজ করবে না।

Answer 6

যদি আপনি সরাসরি প্রপস থেকে রাষ্ট্র শুরু করেন, এটি প্রতিক্রিয়া 16.5 (5 সেপ্টেম্বর 2018) এ দেখায়

Comments

কোন ধারণা কেন এটি সতর্ক করবে?

— নিতিন যাদব

দেখে মনে হচ্ছে এটি কেবল আপনি ব্যবহার করলেই হয় state = props। এখানে আরও তথ্য: github.com/facebook/react/pull/11658#issuecomment-419677176

— এখন

Answer 7

আপনি keyযখন প্রয়োজন পুনরায় সেট করার জন্য মানটি ব্যবহার করতে পারেন , প্রপসটি উত্তম অনুশীলন নয় তা জানিয়ে দিন, কারণ আপনি অনিয়ন্ত্রিত এবং নিয়ন্ত্রিত উপাদান এক জায়গায় রেখেছেন। ডেটা এক জায়গায় হ্যান্ডল হওয়া উচিত এই https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#rec सुझाव----controlled-comp घटक-with- a -চাবি

Answer 8

আপনি কম্পোনেন্ট উইল রিসিপপ্রসেসগুলি ব্যবহার করতে পারেন।

constructor(props) {
    super(props);
    this.state = {
      productdatail: ''
    };
  }

    componentWillReceiveProps(nextProps){
        this.setState({ productdatail: nextProps.productdetailProps })
    }

Comments

— উপাদানউইলরিসিপপ্রসগুলি হ্রাস করা

Answer 9

আপনি যখন কনস্ট্রাক্টর stateথেকে আরম্ভ করবেন তখন আপনার যত্নবান হতে হবে props। এমনকি যদি propsএটি নতুন হিসাবে পরিবর্তিত হয়, রাষ্ট্র পরিবর্তন করা হবে না কারণ মাউন্ট আবার কখনও ঘটবে না। সুতরাং getDerivedStateFromPropsযে জন্য বিদ্যমান।

class FirstComponent extends React.Component {
    state = {
        description: ""
    };

    static getDerivedStateFromProps(nextProps, prevState) {
        if (prevState.description !== nextProps.description) {
          return { description: nextProps.description };
        }

        return null;
    }

    render() {
        const {state: {description}} = this;    

        return (
            <input type="text" value={description} /> 
        );
    }
}