javascript - কার্যকরী স্টেটলেস উপাদান, খাঁটি কম্পোনেন্ট, কম্পোনেন্ট প্রতিক্রিয়া; পার্থক্যগুলি কি এবং কখন আমাদের ব্যবহার করা উচিত?




reactjs ecmascript-6 (2)

আপনি কীভাবে সিদ্ধান্ত নেবেন, আমাদের উপাদানগুলির উদ্দেশ্য / আকার / প্রপস / আচরণের ভিত্তিতে আপনি এই তিনটির মধ্যে কীভাবে চয়ন করবেন?

React.PureComponent বা React.PureComponent থেকে প্রসারিত করা উচিত React.PureComponent স্টেটলেস ফাংশনাল উপাদানগুলি ব্যবহার করা একটি "আর্কিটেকচারাল" পছন্দ এবং বাক্সের বাইরে কোনও কার্যকারিতা সুবিধা নেই (এখনও)।

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

  • যদি আপনি জানেন যে আপনার আউটপুটটি সহজ PureComponent / স্টেটের উপর নির্ভর করে ("সহজ" যার অর্থ কোনও নেস্টেড ডেটা স্ট্রাকচার নয়, যেমন পিউরকম্পোনেন্ট একটি অগভীর তুলনা করে) এবং আপনার প্রয়োজন / কিছু কর্মক্ষমতা উন্নতি পেতে পারেন P

  • পরের / বর্তমান প্রপস এবং রাজ্যের মধ্যে কাস্টম তুলনা লজিক সম্পাদন করে আপনার যদি কিছু পারফরম্যান্স লাভের প্রয়োজন হয় তবে Component প্রসারিত করুন এবং আপনার নিজস্ব shouldComponentUpdate implement উদাহরণস্বরূপ, আপনি লড্যাশ # ইক্যুয়াল ব্যবহার করে দ্রুত একটি গভীর তুলনা সম্পাদন করতে পারেন:

    class MyComponent extends Component {
        shouldComponentUpdate (nextProps, nextState) {
            return !_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState);
        }
    }

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

আরো বিস্তারিত

কার্যক্ষম স্টেটলেস উপাদান:

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

পেশাদাররা:

  • প্রতিক্রিয়ায় কোনও উপাদান নির্ধারণের সহজতম উপায়। আপনার যদি কোনও রাজ্য পরিচালনা করার দরকার না হয় তবে শ্রেণি এবং উত্তরাধিকার নিয়ে কেন বিরক্ত হন? একটি ফাংশন এবং শ্রেণীর মধ্যে অন্যতম প্রধান পার্থক্য হ'ল ফাংশনটির সাথে আপনি নিশ্চিত যে আউটপুট কেবলমাত্র ইনপুটটির উপর নির্ভর করে (পূর্ববর্তী মৃত্যুদণ্ডের কোনও ইতিহাসের উপর নয়)।

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

কনস:

  • কোন জীবনচক্র পদ্ধতি নেই। আপনার কাছে componentDidMount ডিডমাউন্ট এবং অন্যান্য বন্ধুদের সংজ্ঞা দেওয়ার উপায় নেই। সাধারনত আপনি হায়ারার্কিতে একটি প্যারেন্ট উপাদানগুলির মধ্যে এটি করেন যাতে আপনি সমস্ত শিশুকে রাষ্ট্রবিহীন অবস্থায় পরিণত করতে পারেন।

  • যখন পুনরায় রেন্ডার দরকার হয় তখন ম্যানুয়ালি নিয়ন্ত্রণের কোনও উপায় নেই, যেহেতু আপনি shouldComponentUpdate সংজ্ঞায়িত করতে পারবেন না। যখনই উপাদানটি নতুন প্রপস গ্রহণ করবে তখনই রি-রেন্ডার ঘটে (অগভীর তুলনায় কোনও উপায় নয়)। ভবিষ্যতে, প্রতিক্রিয়া স্টেটলেস উপাদানগুলিকে স্বয়ংক্রিয়ভাবে অনুকূল করতে পারে, আপাতত আপনি ব্যবহার করতে পারেন এমন কয়েকটি লাইব্রেরি রয়েছে। রাষ্ট্রহীন উপাদানগুলি কেবলমাত্র ফাংশন, মূলত এটি "ফাংশন মেমোয়েজেশন" এর ক্লাসিক সমস্যা।

  • রেফগুলি সমর্থিত নয়: https://github.com/facebook/react/issues/4936

একটি উপাদান যা পিওরকমম্পোনেন্ট শ্রেণি ভিএস প্রসারিত করে একটি সাধারণ উপাদান যা উপাদান শ্রেণিকে প্রসারিত করে:

PureRenderMixin জন্য ব্যবহৃত প্রতিক্রিয়া আপনি React.createClass সিনট্যাক্স ব্যবহার করে সংজ্ঞায়িত কোনও শ্রেণীর সাথে সংযুক্ত করতে পারেন। shouldComponentUpdate কেবলমাত্র একটি shouldComponentUpdate করে পরবর্তী shouldComponentUpdate এবং পরবর্তী অবস্থার মধ্যে অগভীর তুলনা সম্পাদন করে সেখানে কোনও পরিবর্তন হয়েছে কিনা তা পরীক্ষা করতে হবে। যদি কোনও পরিবর্তন হয় না, তবে পুনরায় রেন্ডার করার দরকার নেই।

আপনি যদি ES6 সিনট্যাক্সটি ব্যবহার করতে চান তবে আপনি মিক্সিন ব্যবহার করতে পারবেন না। সুতরাং সুবিধার জন্য প্রতিক্রিয়াটি একটি PureComponent শ্রেণি চালু করেছে PureComponent আপনি PureComponent ব্যবহার করার পরিবর্তে উত্তরাধিকারী হতে পারেন। PureComponent কেবল shouldComponentUpdate একই উপায়ে PureRendererMixin । এটি বেশিরভাগ সুবিধাজনক জিনিস যাতে আপনার নিজের এটি প্রয়োগ করতে হবে না, বর্তমান / পরবর্তী রাজ্য এবং প্রপসের মধ্যে অগভীর তুলনা সম্ভবত সম্ভবত সবচেয়ে সাধারণ দৃশ্য যা আপনাকে কিছু দ্রুত পারফরম্যান্স জিততে পারে।

উদাহরণ:

class UserAvatar extends Component {
    render() {
       return <div><img src={this.props.imageUrl} /> {{ this.props.username }} </div>
    }
} 

আপনি দেখতে পাচ্ছেন আউটপুটটি নির্ভর করে props.imageUrl এবং props.username । যদি কোনও প্যারেন্ট উপাদানগুলিতে আপনি <UserAvatar username="fabio" imageUrl="http://foo.com/fabio.jpg" /> render প্রতিবার প্রতিক্রিয়া render কল করবে, এমনকি আউটপুটটি হুবহু হবে would একই. মনে রাখবেন যে প্রতিক্রিয়া ডোম পৃথক করে প্রয়োগ করে, তাই ডমটি আসলে আপডেট হয় না। তবুও, ডোম ডিফিংয়ের কাজটি ব্যয়বহুল হতে পারে, সুতরাং এই পরিস্থিতিতে এটি অপচয় হবে।

যদি UserAvatar উপাদানটি PureComponent পরিবর্তে PureComponent প্রসারিত করে, একটি অগভীর তুলনা সম্পাদন করা হয়। এবং যেহেতু প্রপস এবং নেক্সটপ্রপগুলি একই, তাই রেন্ডারকে মোটেই কল করা হবে না।

প্রতিক্রিয়াতে "খাঁটি" সংজ্ঞা সম্পর্কিত নোট:

সাধারণভাবে, একটি "খাঁটি ফাংশন" এমন একটি ফাংশন যা সর্বদা একই ফলাফলের জন্য একই ইনপুট প্রদানে মূল্যায়ন করে। আউটপুট (প্রতিক্রিয়াটির জন্য, এটিই render পদ্ধতির মাধ্যমে ফিরে আসে) কোনও ইতিহাস / রাষ্ট্রের উপর নির্ভর করে না এবং এর কোনও পার্শ্ব-প্রতিক্রিয়া নেই (ক্রিয়াকলাপের বাইরে "বিশ্ব" পরিবর্তন করে এমন ক্রিয়াকলাপ)।

প্রতিক্রিয়া হিসাবে, this.setState উপাদানগুলি উপরের সংজ্ঞা অনুসারে প্রয়োজনীয় শুদ্ধ উপাদান নয় যদি আপনি " this.setState " এমন উপাদানটিকে কল করেন যা কখনও this.setState কল করে না এবং এটি এই স্টেট ব্যবহার করে না।

প্রকৃতপক্ষে, একটি PureComponent , আপনি এখনও PureComponent পদ্ধতিতে পার্শ্ব প্রতিক্রিয়া সম্পাদন করতে পারেন। উদাহরণস্বরূপ আপনি componentDidMount ভিতরে একটি এজাক্স অনুরোধ পাঠাতে পারেন বা render মধ্যে কোনও ডিভের উচ্চতা গতিশীলভাবে সামঞ্জস্য করতে আপনি কিছু ডিওএম গণনা সম্পাদন করতে পারেন।

"বোবা উপাদানগুলি" সংজ্ঞার আরও "ব্যবহারিক" অর্থ রয়েছে (কমপক্ষে আমার বোঝার মধ্যে দিয়ে): একটি বোবা উপাদান "প্রপসের মাধ্যমে পিতামাতাদের দ্বারা কী করণীয় তা জানানো হয়, এবং কীভাবে কাজ করতে হয় তা জানে না তবে প্রপস ব্যবহার করে পরিবর্তে কলব্যাকস।

"স্মার্ট" AvatarComponent উদাহরণ:

class AvatarComponent extends Component {
    expandAvatar () {
        this.setState({ loading: true });
        sendAjaxRequest(...).then(() => {
            this.setState({ loading: false });
        });
    }        

    render () {
        <div onClick={this.expandAvatar}>
            <img src={this.props.username} />
        </div>
    }
}

"বোবা" AvatarComponent উদাহরণ:

class AvatarComponent extends Component {
    render () {
        <div onClick={this.props.onExpandAvatar}>
            {this.props.loading && <div className="spinner" />}
            <img src={this.props.username} />
        </div>
    }
}

শেষ পর্যন্ত আমি বলব যে "বোবা", "স্টেটলেস" এবং "খাঁটি" হ'ল একেবারে পৃথক ধারণা যা কখনও কখনও ওভারল্যাপ করতে পারে তবে তা সম্ভবত আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে।

প্রতিক্রিয়া v15.3.0 থেকে জানতে পেরেছিলাম , বিল্ট-ইন পিউরেন্ডারমিক্সিন সহ প্রসারিত করার জন্য আমাদের কাছে পিউরকম্পোনেন্ট নামে একটি নতুন বেস ক্লাস রয়েছে। আমি যা বুঝি তা হুডের নীচে এই shouldComponentUpdate একটি অগভীর তুলনা নিয়োগ করা উচিত shouldComponentUpdate

একটি প্রতিক্রিয়া উপাদান সংজ্ঞায়িত করার জন্য এখন আমাদের কাছে 3 টি উপায় রয়েছে:

  1. কার্যকরী রাজ্যহীন উপাদান যা কোনও শ্রেণি প্রসারিত করে না
  2. একটি উপাদান যা PureComponent শ্রেণি প্রসারিত করে
  3. একটি সাধারণ উপাদান যা Component শ্রেণিকে প্রসারিত করে

কিছু সময় আগে আমরা স্টেটলেস উপাদানগুলিকে খাঁটি উপাদান বা ডাম্প উপাদান হিসাবে ডেকেছিলাম। "খাঁটি" শব্দের পুরো সংজ্ঞা এখন প্রতিক্রিয়াতে পরিবর্তিত হয়েছে বলে মনে হয়।

যদিও আমি এই তিনটির মধ্যে মৌলিক পার্থক্যগুলি বুঝতে পারি, কখন কী বেছে নেব তা এখনও নিশ্চিত নই। এছাড়াও প্রত্যেকের পারফরম্যান্স প্রভাব এবং ট্রেড-অফগুলি কী কী?

আপডেট :

এগুলিই আমি স্পষ্ট হওয়ার প্রত্যাশা করি:

  • আমি কি আমার সাধারণ উপাদানগুলি কার্যকরী (সরলতার জন্য) হিসাবে সংজ্ঞায়িত করতে বা PureComponent ক্লাসটি (পারফরম্যান্সের জন্য) বাছাই করতে পারি?
  • পারফরম্যান্সটি কি উত্সাহ দেয় যে আমি যে সরলতার জন্য হারিয়েছি তার জন্য সত্যিকারের বাণিজ্য বন্ধ রয়েছে?
  • আমি যখনই সবসময় ভাল পারফরম্যান্সের জন্য PureComponent ব্যবহার করতে পারি তখন কি আমার কখনই সাধারণ Component বর্গ বাড়ানো দরকার?

প্রতিক্রিয়া নিয়ে আমি কোনও প্রতিভাবান নই, তবে আমার বোঝাপড়া থেকে আমরা প্রতিটি উপাদানকে নিম্নলিখিত পরিস্থিতিতে ব্যবহার করতে পারি

  1. স্টেটলেস উপাদান - এই উপাদানগুলির মধ্যে জীবনচক্র নেই যার ফলে সেই উপাদানগুলি পিতামন্ডলের উপাদানগুলির পুনরাবৃত্ত উপাদানগুলিতে ব্যবহার করা উচিত যেমন পাঠ্য তালিকার রেন্ডারিং যা কেবল তথ্য প্রদর্শন করে এবং সম্পাদনের জন্য কোনও পদক্ষেপ নেই।

  2. খাঁটি উপাদান - এগুলি হ'ল আইটেমগুলিতে জীবনচক্র থাকে এবং যখন কোনও নির্দিষ্ট প্রপস দেওয়া হয় তখন এগুলি সর্বদা একই ফলাফলটি ফিরে আসবে। ফলাফলগুলির তালিকা বা নির্দিষ্ট অবজেক্টের ডেটা প্রদর্শন করার সময় এই উপাদানগুলি ব্যবহার করা যেতে পারে যার মধ্যে জটিল শিশু উপাদান নেই এবং অপারেশন সঞ্চালনের জন্য ব্যবহৃত হয় যা কেবলমাত্র নিজের উপর প্রভাব ফেলে। যেমন ব্যবহারকারীর কার্ডের প্রদর্শন তালিকা বা পণ্য কার্ডের তালিকা (মৌলিক পণ্য সম্পর্কিত তথ্য) এবং কেবলমাত্র ক্রিয়া ব্যবহারকারী সম্পাদন করতে পারেন তা হল বিশদ পৃষ্ঠাটি দেখতে বা কার্টে যুক্ত করতে ক্লিক করুন।

  3. সাধারণ উপাদান বা জটিল উপাদান - আমি শব্দ জটিল উপাদান ব্যবহার করতাম কারণ সেগুলি সাধারণত পৃষ্ঠার স্তরের উপাদান এবং এতে প্রচুর পরিমাণে বাচ্চাদের উপাদান থাকে এবং যেহেতু প্রতিটি শিশু তার নিজস্ব অনন্য পদ্ধতিতে আচরণ করতে পারে তাই আপনি এটি 100% নিশ্চিত হতে পারবেন না প্রদত্ত রাজ্যে একই ফলাফল রেন্ডার করুন। আমি যেমন বলেছি এগুলি সাধারণত ধারক উপাদান হিসাবে ব্যবহার করা উচিত







ecmascript-6