Изменение контента на основе выбранного меню с кешированием

Question

У меня есть этот код.

class Component { 
 
    
 
    state = { 
 
    selectedView: 'foo', 
 
    } 
 
    
 
    onMenuClicked(event, menuItem) { 
 
    switch(menuItem) { 
 
     case 'foo': 
 
     this.setState({ selectedView: 'foo'}) 
 
     break; 
 
     case 'bar': 
 
     this.setState({ selectedView: 'bar'}) 
 
     break; 
 
    } 
 
    } 
 
    
 
    renderBar() { 
 
    return <Bar />  
 
    } 
 

 
    renderFoo() { 
 
    return <Foo /> 
 
    } 
 
    
 
    renderContent() { 
 
    switch(this.state.selectedView) { 
 
     case 'foo': 
 
     return this.renderFoo(); 
 
     case 'bar': 
 
     return this.renderBar(); 
 
    } 
 
    } 
 
    
 
    render() { 
 
    return(
 
     <div> 
 
     <Menu onMenuSelected((e, menuItem) => this.onMenuClicked(e, menyItem)) /> // items foo and bar 
 
     {this.renderContent()} 
 
     </div> 
 
    ) 
 
    }

Это прекрасно работает. Однако, так как Foo и бар компонент очень тяжелы и шансы пользователя переключаясь между этими компонентами являются высокими, я хотел бы иметь этот вид потока,

• На странице загрузки, визуализации Foo
• Если бар щелкнуть в первый раз, отобразить панель
• Для всех последующих изменений меню просто скройте/покажите компоненты foo/bar (на основе щелчка по меню) и не перезагружайте их при каждом изменении меню.

Мне нужно адаптировать мой код (самый чистый способ), чтобы иметь такое поведение. Любая помощь будет оценена по достоинству. Спасибо.

Answer 1

Один из способов управления этим состоял в использовании display: none на ваших элементах и ​​отслеживании того, какие элементы уже были отображены. Таким образом, реакция всегда будет поддерживать отображаемый компонент в DOM и обновлять только значение display.

class Component { 

    state = { 
    selectedView: 'foo', 
    foo: true // to indicate that foo has been rendered 
    } 

    onMenuClicked(event, menuItem) { 
    switch(menuItem) { 
     case 'foo': 
     this.setState({ selectedView: 'foo', foo: true}) 
     break; 
     case 'bar': 
     this.setState({ selectedView: 'bar', bar: true}) 
     break; 
    } 
    } 

    renderBar() { 
    const selected = this.state.selectedView === 'bar'; 

    if (!this.state.bar) { 
     return <div/> // don't render bar at all 
    } 
    return <div style={{display: selected ? 'block' : 'none'}}> 
     <Bar /> 
    </div> 
    } 

    renderFoo() { 
    const selected = this.state.selectedView === 'foo'; 

    if (!this.state.foo) { 
     return <div/> // don't render foo at all 
    } 
    return <div style={{display: selected ? 'block' : 'none'}}> 
     <Foo/> 
    </div> 
    } 

    renderContent() { 
    return <div> 
     {this.renderFoo()} 
     {this.renderBar()} 
    <div/> 
    } 

    render() { 
    return(
     <div> 
     <Menu onMenuSelected((e, menuItem) => this.onMenuClicked(e, menyItem)) /> // items foo and bar 
     {this.renderContent()} 
     </div> 
    ) 
    }