React的内容根据所选菜单的缓存进行更改

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和bar组件非常重，并且用户在这些组件之间切换的可能性很高，所以我希望有这种流，

• 页面加载时，渲染foo
• 如果第一次点击栏，渲染栏
• 对于所有随后的菜单更改，只需隐藏/显示foo/bar组件(基于菜单单击)，并且不要在每次菜单更改时重新加载它们。

我需要调整我的代码(最干净的方式可能)有这样的行为。任何帮助都会很感激。谢谢你。

Answer 1

处理这个问题的一种方法是在元素上使用display: none并跟踪已经显示的元素。这样react将始终保持渲染组件在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>
    )
  }