DOM এ একাধিকবার React.render () ব্যবহার করা কি ঠিক আছে?


107

আমি ডম জুড়ে একাধিকবার উপাদান যুক্ত করতে প্রতিক্রিয়া ব্যবহার করতে চাই। এই কোলাহলটি দেখায় আমি কী করতে চাই এবং এটি কোনও ত্রুটি ছুঁড়ে না ফেলে। কোডটি এখানে:

এইচটিএমএল:

<div id="container">
    <!-- This element's contents will be replaced with the first component. -->
</div>

<div id="second-container">
    <!-- This element's contents will be replaced with the second component. -->
</div>

জাতীয়:

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

React.render(<Hello name="Second World" />, document.getElementById('second-container'));

আমি এই প্রশ্নটি দেখেছি এবং আমি আশঙ্কা করছি যে উপরের কাজগুলি করার দ্বারা, আমি প্রতিক্রিয়া উপাদানগুলি একে অপরের সাথে হস্তক্ষেপ করার ঝুঁকি নিয়ে যাব। এই প্রশ্নের উত্তরে সার্ভার-সাইড রেন্ডারিং ব্যবহার করা পরামর্শ দেয় যা আমার পক্ষে বিকল্প নয় কারণ আমি জ্যাঙ্গো সার্ভার-সাইড ব্যবহার করছি।

অন্যদিকে, সম্ভবত আমি যা করছি তা ঠিক আছে কারণ আমার কাছে কেবল প্রতিক্রিয়া পাঠাগারটির একটি উদাহরণ রয়েছে (একাধিক উপাদান তাদের প্রতিক্রিয়াটির নিজস্ব উদাহরণকে ডাকে)?

একাধিক ডিওএম ব্যবহারের এই উপায়টি প্রতিক্রিয়া ব্যবহারের কোনও সঠিক উপায়?

উত্তর:


120

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


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

আপনি সম্ভবত shouldompompenderUpdate তাকান এবং এটি ভবিষ্যতে পারফরম্যান্স বুট আপ করতে পারে (সম্ভবত আপনার ক্ষেত্রে না)। রেফারেন্সটি এখানে: ফেসবুক.
জিম

হ্যাপার্স উত্তর সঠিক থাকলে @YP ক্রাম্বল করুন, দয়া করে এটি চিহ্নিত করুন
ডানা উডম্যান

এবং কি যদি সম্পর্কে একাধিক আছে যখন ReactDOM.render()একই উপাদান সন্নিবেশ করতে যে divকোন পৃষ্ঠাটি আপনি খুলতে উপর নির্ভর করে? বিশেষত, আপনার কাছে কেবলমাত্র এক অনগ্রসর কনটেনেটেড app.jsসম্পদ যা আপনি <script src="app.js">প্রতিটি পৃষ্ঠায় রয়েছেন । এবং এটি libs বোঝায়, বলুন, jQuery, বুটস্ট্র্যাপ, প্রতিক্রিয়া এবং আপনার কাস্টম জেএস কোড এবং প্রতিক্রিয়া উপাদানগুলি রয়েছে। আপনি যদি যান /foo, আপনি আছে ReactDOM.render(<Foo />, getElemById('content'))। আপনি যদি /bar', you have ReactDOM.render (<বার />, getElemById ('সামগ্রী')) visit যান `` তারা হস্তক্ষেপ না। আপনি কীভাবে এটি পরিচালনা করেন?
সবুজ

3
@ গ্রীন আমি নিশ্চিত যে আমি বুঝতে পারছি না, যদি উপাদানগুলি পৃথক পৃষ্ঠাগুলিতে থাকে তবে তারা কীভাবে হস্তক্ষেপ করবে? অন্যথায়, কেন না প্রতিটি উপাদানগুলির জন্য একটি নতুন ধারক উপাদান যুক্ত করুন, যেমন:ReactDOM.render(<Foo/>, document.getElementById('content').appendChild(document.createElement('div')))
ফড়িং

3

এই পৃষ্ঠাটি একটি পৃষ্ঠা লোড পারফরম্যান্স দৃষ্টিকোণ থেকে ঠিক আছে, তবে অন্যান্য ডাউনসাইড রয়েছে এবং যদি সম্ভব হয় তবে একাধিক প্রতিক্রিয়া মূলগুলি এড়ানো উচিত।

  • বিভিন্ন প্রতিক্রিয়া মূলগুলি প্রসঙ্গটি ভাগ করতে পারে না এবং যদি আপনাকে প্রতিক্রিয়ার শিকড়গুলির মধ্যে যোগাযোগের প্রয়োজন হয় তবে আপনাকে গ্লোবাল ডিওএম ইভেন্টগুলিতে ফলব্যাক করতে হবে
  • সময় স্লাইসিং - সাসপেন্স এবং অ্যাসিঙ্ক রেন্ডারিং এর মতো পারফরম্যান্স অপ্টিমাইজেশন থেকে আপনি কম সুবিধা পাবেন । প্রতিক্রিয়া মূলের সীমানা পেরিয়ে স্থগিত করা সম্ভব নয়

আরও রেডিং - https://github.com/facebook/react/issues/12700

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.