ইতিমধ্যে বেশ কয়েকটি দুর্দান্ত উত্তর রয়েছে, তবে আমি মনে করি না যে সেগুলি খুব ভালভাবে ব্যাখ্যা করা হয়েছে এবং প্রদত্ত কয়েকটি পদ্ধতিতে কিছু গ্যাচ রয়েছে যা মানুষকে ট্রিপ করতে পারে। সুতরাং আমি তিনটি প্রধান উপায় (আরও একটি অফ-বিষয় বিকল্প) এটি করতে যাচ্ছি এবং ভাল এবং কনস ব্যাখ্যা করতে যাচ্ছি। আমি বেশিরভাগ ক্ষেত্রেই এটি লিখছি কারণ বিকল্প 1 টি প্রচুর প্রস্তাবিত ছিল এবং সঠিকভাবে ব্যবহার না করা হলে সেই বিকল্পটি নিয়ে প্রচুর সম্ভাব্য সমস্যা রয়েছে।
বিকল্প 1: পিতামাতায় শর্তাধীন রেন্ডারিং।
আমি এই পদ্ধতিটি পছন্দ করি না যদি না আপনি কেবলমাত্র একবারের উপাদানটি রেন্ডার করে সেখানে রেখে যান। সমস্যাটি হ'ল এটি যখনই আপনি দৃশ্যমানতা টগল করবেন তখন স্ক্র্যাচ থেকে উপাদান তৈরি করতে প্রতিক্রিয়া দেখাবে। উদাহরণ এখানে। লগআউটবটন বা লগইনবটন শর্তসাপেক্ষে প্যারেন্ট লগইনকন্ট্রোলটিতে রেন্ডার করা হচ্ছে। আপনি যদি এটি চালনা করেন তবে লক্ষ্য করবেন যে প্রতিটি বোতামে ক্লিক করে কনস্ট্রাক্টর কল পেতে চলেছে। https://codepen.io/Kelnor/pen/LzPdpN?editors=1111
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
class LogoutButton extends React.Component{
constructor(props, context){
super(props, context)
console.log('created logout button');
}
render(){
return (
<button onClick={this.props.onClick}>
Logout
</button>
);
}
}
class LoginButton extends React.Component{
constructor(props, context){
super(props, context)
console.log('created login button');
}
render(){
return (
<button onClick={this.props.onClick}>
Login
</button>
);
}
}
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
স্ক্র্যাচ থেকে উপাদান তৈরি করতে এখন প্রতিক্রিয়া বেশ দ্রুত। তবে এটি তৈরি করার সময় আপনার কোডটি কল করতে হবে। সুতরাং যদি আপনার কনস্ট্রাক্টর, কম্পোনেন্টডিডমাউন্ট, রেন্ডার ইত্যাদি কোড ব্যয়বহুল হয়, তবে এটি উপাদানটি উল্লেখযোগ্যভাবে কমিয়ে দেবে। এর অর্থ হ'ল আপনি এটিকে রাষ্ট্রীয় উপাদানগুলির সাথে ব্যবহার করতে পারবেন না যেখানে আপনি চান যখন লুকানো থাকে তখন রাষ্ট্রটি সংরক্ষণ করা হয় (এবং প্রদর্শিত হলে পুনরুদ্ধার করা হয়।) এর একটি সুবিধা হ'ল লুকানো উপাদানটি নির্বাচিত হওয়া অবধি একেবারে তৈরি করা হয় নি। সুতরাং লুকানো উপাদানগুলি আপনার প্রাথমিক পৃষ্ঠার বোঝাটি বিলম্ব করবে না। এমনও ঘটনা ঘটতে পারে যেখানে আপনি টগল করা অবস্থায় পুনরায় সেট করতে একটি রাষ্ট্রীয় উপাদান চান। এই ক্ষেত্রে এটি আপনার সেরা বিকল্প।
বিকল্প 2: সন্তানের শর্তাধীন রেন্ডারিং
এটি একবারে উভয় উপাদান তৈরি করে। এরপরে শর্ট সার্কিটগুলি রেন্ডার কোডের বাকি অংশগুলি যদি উপাদানটি গোপন থাকে। আপনি দৃশ্যমান প্রপ ব্যবহার করে অন্যান্য পদ্ধতিতে অন্যান্য যুক্তিকেও শর্ট সার্কিট করতে পারেন। কোডপেন পৃষ্ঠায় কনসোল.লগটি লক্ষ্য করুন। https://codepen.io/Kelnor/pen/YrKaWZ?editors=0011
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
<LoginButton isLoggedIn={isLoggedIn} onClick={this.handleLoginClick}/>
<LogoutButton isLoggedIn={isLoggedIn} onClick={this.handleLogoutClick}/>
</div>
);
}
}
class LogoutButton extends React.Component{
constructor(props, context){
super(props, context)
console.log('created logout button');
}
render(){
if(!this.props.isLoggedIn){
return null;
}
return (
<button onClick={this.props.onClick}>
Logout
</button>
);
}
}
class LoginButton extends React.Component{
constructor(props, context){
super(props, context)
console.log('created login button');
}
render(){
if(this.props.isLoggedIn){
return null;
}
return (
<button onClick={this.props.onClick}>
Login
</button>
);
}
}
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
এখন, যদি আরম্ভের যুক্তি দ্রুত হয় এবং শিশুরা রাষ্ট্রহীন হয়, তবে আপনি কর্মক্ষমতা বা কার্যকারিতার মধ্যে কোনও পার্থক্য দেখতে পাবেন না। যাইহোক, কেন প্রতিক্রিয়া যেভাবেই হোক প্রতিটি টগল একেবারে নতুন উপাদান তৈরি করুন? প্রারম্ভিককরণটি ব্যয়বহুল হলেও, বিকল্পটি 1 প্রতিবার আপনি যখন কোনও উপাদান টগল করবেন এটি চালিত হবে যা স্যুইচ করার সময় পৃষ্ঠাটি ধীর করে দেবে। বিকল্প 2 প্রথম পৃষ্ঠার লোডে উপাদানটির সমস্ত ইনসাইট চালাবে। প্রথম লোডটি ধীর করা হচ্ছে। আবার নোট করা উচিত। আপনি যদি শর্তের ভিত্তিতে কেবল একবারের উপাদানটি প্রদর্শন করছেন এবং এটি টগলিং করছেন না, বা আপনি টগল্লেড করার সময় এটি পুনরায় সেট করতে চান, তবে বিকল্প 1 সঠিক এবং সম্ভবত সেরা বিকল্প।
ধীর পৃষ্ঠার লোড যদি কোনও সমস্যা হয় তবে এর অর্থ আপনি একটি জীবনকালীন পদ্ধতিতে ব্যয়বহুল কোড পেয়েছেন এবং এটি সাধারণত ভাল ধারণা নয়। আপনি, এবং সম্ভবত, জীবনচক্র পদ্ধতিগুলি থেকে ব্যয়বহুল কোডটি সরিয়ে ধীর পৃষ্ঠার লোডটি সমাধান করতে পারেন। কম্পোনেন্টডিডমাউন্ট দ্বারা লাথি মেরে এমন একটি অ্যাসিঙ্ক ফাংশন এ নিয়ে যান এবং কলব্যাকটি সেট স্টেট () সহ একটি স্টেট ভেরিয়েবলে রেখে দিন। যদি রাষ্ট্রের পরিবর্তনশীল নাল হয় এবং উপাদানটি দৃশ্যমান হয় তবে রেন্ডার ফাংশনটি কোনও স্থানধারককে রিটার্ন করুন। অন্যথায় ডেটা রেন্ডার করুন। এই পৃষ্ঠাটি লোড হওয়ার সাথে সাথে ট্যাবগুলি দ্রুত লোড হবে এবং ট্যাবগুলি পপুলেট করবে। আপনি যুক্তিটিকে পিতামাতার মধ্যে সরাতে পারেন এবং ফলাফলগুলি প্রপস হিসাবে বাচ্চাদের কাছে ঠেলাতে পারেন। কোন ট্যাবটি প্রথমে লোড হবে তা আপনি অগ্রাধিকার দিতে পারেন। অথবা ফলাফলগুলি ক্যাশে করুন এবং প্রথম প্রথম কোনও উপাদান দেখানোর পরে যুক্তিটি চালান।
বিকল্প 3: ক্লাস লুকানো
ক্লাস হিডিং সম্ভবত প্রয়োগ করা সবচেয়ে সহজ। উল্লিখিত হিসাবে আপনি কেবল প্রদর্শন সহ একটি সিএসএস ক্লাস তৈরি করেছেন: কিছুই নেই এবং প্রপ উপর ভিত্তি করে ক্লাস বরাদ্দ করুন। ডাউনসাইড হ'ল প্রতিটি লুকানো উপাদানটির পুরো কোডটি বলা হয় এবং সমস্ত লুকানো উপাদান ডিওমের সাথে সংযুক্ত থাকে। (বিকল্প 1 গোপন উপাদানগুলি একেবারেই তৈরি করে না And অন্যান্য উত্তর কিন্তু আমি এর সাথে কথা বলতে পারি না।
বিকল্প 4: একটি উপাদান কিন্তু প্রপস পরিবর্তন। অথবা সম্ভবত কোনও উপাদান এবং ক্যাশে এইচটিএমএল নেই।
এইটি প্রতিটি অ্যাপ্লিকেশনের জন্য কাজ করবে না এবং এটি বিষয়বস্তু বন্ধ কারণ এটি উপাদানগুলি লুকানোর বিষয়ে নয়, তবে এটি লুকিয়ে রাখার চেয়ে কিছু ব্যবহারের ক্ষেত্রে সমাধানের চেয়ে ভাল সমাধান হতে পারে। বলুন আপনার ট্যাব রয়েছে। এটিতে একটি প্রতিক্রিয়া উপাদান লিখতে এবং ট্যাবটিতে যা প্রদর্শিত হয়েছে তা পরিবর্তনের জন্য প্রপসটি ব্যবহার করা সম্ভব হতে পারে। আপনি জেএসএক্সকে রাষ্ট্রীয় চলকগুলিতেও সংরক্ষণ করতে পারেন এবং কোন জেএসএক্স রেন্ডার ফাংশনে ফিরে আসবেন তা সিদ্ধান্ত নেওয়ার জন্য একটি প্রপ ব্যবহার করতে পারেন। যদি জেএসএক্স তৈরি করতে হয় তবে এটি করুন এবং এটি পিতামাতায় ক্যাশে করুন এবং সঠিকটিকে প্রপস হিসাবে প্রেরণ করুন। বা সন্তানের মধ্যে জেনারেট করুন এবং এটিকে সন্তানের অবস্থায় ক্যাশে করুন এবং সক্রিয়টিকে নির্বাচন করতে প্রপস ব্যবহার করুন।