कई शानदार जवाब पहले से ही हैं, लेकिन मुझे नहीं लगता कि उन्हें बहुत अच्छी तरह से समझाया गया है और दिए गए कई तरीकों में कुछ गोचर्स शामिल हैं जो शायद यात्रा कर सकते हैं। तो मैं ऐसा करने के लिए तीन मुख्य तरीकों (प्लस एक-विषय-विकल्प) पर जा रहा हूं और पेशेवरों और विपक्षों को समझाऊंगा। मैं ज्यादातर यह लिख रहा हूं क्योंकि विकल्प 1 की बहुत सिफारिश की गई थी और अगर सही तरीके से उपयोग नहीं किया गया तो उस विकल्प के साथ बहुत सारे संभावित मुद्दे हैं।
विकल्प 1: माता-पिता में सशर्त प्रतिपादन।
मुझे यह तरीका पसंद नहीं है जब तक कि आप केवल एक बार घटक को रेंडर करने के लिए नहीं जा रहे हैं और इसे वहां छोड़ दें। मुद्दा यह है कि यह दृश्यता को टॉगल करने के लिए हर बार खरोंच से घटक बनाने के लिए प्रतिक्रिया देगा। यहाँ उदाहरण है। LogoutButton या LoginButton को मूल रूप से LoginControl में दिया जा रहा है। यदि आप इसे चलाते हैं, तो आप देखेंगे कि निर्माणकर्ता को प्रत्येक बटन क्लिक पर बुलाया जा रहा है। 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 ठीक है और शायद सबसे अच्छा विकल्प है।
यदि धीमा पृष्ठ लोड एक समस्या है, हालांकि, इसका मतलब है कि आपको जीवन चक्र विधि में महंगा कोड मिला है और यह आमतौर पर एक अच्छा विचार नहीं है। आप जीवन चक्र के तरीकों में से महंगे कोड को हटाकर धीमा पेज लोड को हल कर सकते हैं और शायद करना चाहिए। इसे एक ऐसे Async फ़ंक्शन में ले जाएँ, जो ComponentDidMount द्वारा किक किया गया है और कॉलबैक ने इसे स्टेटस्टेट में setState () के साथ रखा है। यदि राज्य चर शून्य है और घटक दिखाई देता है, तो रेंडर फ़ंक्शन को एक प्लेसहोल्डर लौटाएं। अन्यथा डेटा रेंडर करें। इस तरह पेज जल्दी लोड होगा और टैब को लोड करते ही पॉप्युलेट करेगा। आप तर्क को माता-पिता में भी स्थानांतरित कर सकते हैं और परिणाम को बच्चों को सहारा के रूप में धकेल सकते हैं। इस तरह आप प्राथमिकता दे सकते हैं कि कौन सा टैब पहले लोड हो जाए। या परिणामों को कैश करें और केवल एक घटक दिखाए जाने पर तर्क को चलाएं।
विकल्प 3: कक्षा छिपाना
कक्षा छिपाना शायद लागू करना सबसे आसान है। जैसा कि आपने उल्लेख किया है कि आप केवल प्रदर्शन के साथ एक सीएसएस वर्ग बनाते हैं: कोई नहीं और प्रोप के आधार पर कक्षा असाइन करें। नकारात्मक पक्ष हर छिपे हुए घटक का पूरा कोड है और सभी छिपे हुए घटक DOM से जुड़े होते हैं। (विकल्प 1 छिपे हुए घटकों को बिल्कुल भी नहीं बनाता है। और विकल्प 2 शॉर्ट सर्किट अनावश्यक कोड है जब घटक छिपा होता है और DOM के घटक को पूरी तरह से हटा देता है।) ऐसा प्रतीत होता है कि यह टिप्पणीकारों द्वारा किए गए कुछ परीक्षणों के अनुसार दृश्यता को बढ़ाता है। अन्य उत्तर लेकिन मैं उस पर बात नहीं कर सकता।
विकल्प 4: एक घटक लेकिन प्रॉप्स बदलें। या शायद कोई घटक नहीं है और HTML को कैश करें।
यह हर एप्लिकेशन के लिए काम नहीं करेगा और यह विषय से बाहर है क्योंकि यह घटकों को छिपाने के बारे में नहीं है, लेकिन यह छिपाने के लिए कुछ उपयोग मामलों के लिए एक बेहतर समाधान हो सकता है। मान लीजिए कि आपके पास टैब हैं। हो सकता है कि एक रिएक्ट कंपोनेंट लिखना संभव हो और टैब में जो प्रदर्शित हो उसे बदलने के लिए प्रॉप्स का इस्तेमाल करें। आप जेएसएक्स को स्टेट वेरिएबल्स में भी सेव कर सकते हैं और यह तय करने के लिए एक प्रोप का इस्तेमाल कर सकते हैं कि जेएसएक्स रेंडर फंक्शन में कैसे लौटेगा। यदि JSX को जेनरेट करना है तो इसे करें और इसे पैरेंट में कैश करें और सही को प्रॉप के रूप में भेजें। या बच्चे में उत्पन्न करते हैं और इसे बच्चे की स्थिति में कैश करते हैं और सक्रिय एक का चयन करने के लिए प्रॉप्स का उपयोग करते हैं।