Zaten birkaç harika cevap var, ama çok iyi açıklandıklarını sanmıyorum ve verilen yöntemlerin birçoğu insanları gezebilecek bazı gotchalar içeriyor. Bu yüzden bunu yapmak ve artıları ve eksileri açıklamak için üç ana yoldan (artı bir konu dışı seçenek) geçeceğim. Çoğunlukla bunu yazıyorum çünkü Seçenek 1 çok tavsiye edildi ve doğru kullanılmazsa bu seçenekle ilgili birçok potansiyel sorun var.
Seçenek 1: Üst öğede Koşullu İşleme.
Bileşeni yalnızca bir kez oluşturup orada bırakmayacaksanız bu yöntemi sevmiyorum. Sorun, görünürlüğü her değiştirdiğinizde bileşenin sıfırdan bileşen oluşturmasına neden olmasıdır. İşte örnek. LogoutButton veya LoginButton, üst LoginControl öğesinde koşullu olarak oluşturuluyor. Bunu çalıştırırsanız, her düğme tıklamasında kurucunun çağrıldığını göreceksiniz. 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')
);
React, sıfırdan bileşenler oluşturma konusunda oldukça hızlı. Ancak, kodunuzu oluştururken yine de kodunuzu çağırması gerekir. Bu nedenle, kurucunuz, componentDidMount, render vb. Kodunuz pahalıysa, bileşeni göstermede önemli ölçüde yavaşlar. Ayrıca, gizli olduğunda (ve görüntülendiğinde geri yüklendiğinde) durumun korunmasını istediğiniz durum bilgisi olan bileşenlerle bunu kullanamayacağınız anlamına gelir. Bir avantaj, gizli bileşenin seçilene kadar hiç oluşturulmamasıdır. Böylece gizli bileşenler ilk sayfa yüklemenizi geciktirmez. Değiştirildiğinde sıfırlamak için durum bilgisi olan bir bileşenin İSTENİLMESİ durumları da olabilir. Bu durumda bu en iyi seçeneğinizdir.
Seçenek 2: Çocukta Koşullu Görüntü Oluşturma
Bu, her iki bileşeni de bir kez oluşturur. Daha sonra, bileşen gizlenmişse render kodunun geri kalanını kısa devre yapar. Görünür pervaneyi kullanarak diğer yöntemlerde diğer mantığı kısa devre yapabilirsiniz. Kod açıklığı sayfasında console.log dosyasına dikkat edin. 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')
);
Şimdi, başlatma mantığı hızlıysa ve çocuklar vatansızsa, performans veya işlevsellikte bir fark görmezsiniz. Ancak, React'i her geçişte neden yepyeni bir bileşen oluştursun? Ancak başlatma pahalıysa, geçiş sırasında sayfayı yavaşlatan bir bileşeni her değiştirişinizde Seçenek 1 çalışacaktır. Seçenek 2, ilk sayfa yüklemesinde bileşenin tüm inits'lerini çalıştıracaktır. İlk yükü yavaşlatıyor. Tekrar not etmeliyim. Bileşeni yalnızca bir koşula bağlı olarak bir kez gösteriyorsanız ve değiştirmiyorsanız veya değiştirdiğinizde sıfırlanmasını istiyorsanız, Seçenek 1 iyidir ve muhtemelen en iyi seçenektir.
Ancak yavaş sayfa yüklemesi bir sorunsa, bir yaşam döngüsü yönteminde pahalı bir kodunuz olduğu anlamına gelir ve bu genellikle iyi bir fikir değildir. Pahalı kodu yaşam döngüsü yöntemlerinden çıkararak yavaş sayfa yükünü çözebilirsiniz ve muhtemelen çözmelisiniz. ComponentDidMount tarafından başlatılan bir zaman uyumsuz işlevine taşıyın ve geri çağrıyı setState () ile bir durum değişkenine koymasını sağlayın. Durum değişkeni null ise ve bileşen görünürse, oluşturma işlevinin bir yer tutucu döndürmesini sağlayın. Aksi takdirde verileri oluşturun. Bu şekilde sayfa hızla yüklenir ve sekmeler yüklendikçe doldurulur. Ayrıca mantığı ebeveyne taşıyabilir ve sonuçları sahne olarak çocuklara aktarabilirsiniz. Bu şekilde önce hangi sekmelerin yükleneceğine öncelik verebilirsiniz. Veya sonuçları önbelleğe alın ve mantığı yalnızca bir bileşen ilk kez gösterildiğinde çalıştırın.
Seçenek 3: Sınıf Gizleme
Sınıf gizleme muhtemelen uygulaması en kolay olanıdır. Belirtildiği gibi, sadece display: none ile bir CSS sınıfı oluşturursunuz ve sınıfı prop'ye göre atarsınız. Dezavantajı, her gizli bileşenin kodunun tamamıdır ve tüm gizli bileşenler DOM'a eklenir. (Seçenek 1, gizli bileşenleri hiç oluşturmaz. Bileşen gizlendiğinde ve bileşen DOM'dan tamamen kaldırıldığında Seçenek 2 kısa devre kodlarına gereksiz kodlar ekler.) diğer cevaplar ama bununla konuşamam.
Seçenek 4: Tek bileşenli ancak Props'u değiştir. Ya da hiç bileşen ve HTML önbellek.
Bu, her uygulama için çalışmaz ve konu dışıdır çünkü bileşenleri gizlemekle ilgili değildir, ancak bazı kullanım durumları için gizlemekten daha iyi bir çözüm olabilir. Diyelim ki sekmeleriniz var. Bir React Bileşeni yazmak ve sekmede görüntülenenleri değiştirmek için sadece propsları kullanmak mümkün olabilir. Ayrıca JSX'i durum değişkenlerine kaydedebilir ve oluşturma işlevinde hangi JSX'in döndürüleceğine karar vermek için bir prop kullanabilirsiniz. JSX oluşturulması gerekiyorsa, bunu yapın ve üst öğede önbelleğe alın ve doğru olanı prop olarak gönderin. Ya da çocukta oluşturun ve çocuğun durumunda önbellekleyin ve aktif olanı seçmek için sahne kullanın.