根据带有缓存的选定菜单响应内容更改

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
如果bar是第一次点击，渲染bar
对于所有后续菜单更改，只需 hide/show 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>
    )
  }

根据带有缓存的选定菜单响应内容更改

React content change based on selected menu with caching

reactjs

react-redux