javascript - React JavaScript 阻止组件卸载

Question

我是 React JavaScript 新手。以前我是一名 WPF 桌面应用程序开发人员，我使用 Frame和Page广泛用于我的桌面应用程序。我想用 React JavaScript 实现几乎同样的事情。我想用 React JavaScript 制作一个底部标签栏。这是我目前的工作:

App.js :

import './App.css';
import React, { Component } from 'react';
import BottomTabBar from './BottomTabBar/BottomTabBar';
import HomePage from './HomePage/HomePage';

class App extends Component {
  render() {
    let menuItems = [];

    menuItems.push({
      label: 'Home',
      faIcon: 'fas fa-home',
      content: (
        <HomePage/>
      )
    });

    menuItems.push({
      label: 'Numbers',
      faIcon: 'fas fa-ellipsis-h',
      content: (
        <h1>
          This is numbers page.
        </h1>
      )
    });

    menuItems.push({
      label: 'Notifications',
      faIcon: 'fas fa-bell',
      content: (
        <h1>
          This is notifications page.
        </h1>
      )
    });

    menuItems.push({
      label: 'Menu',
      faIcon: 'fas fa-bars',
      content: (
        <h1>
          This is menu page.
        </h1>
      )
    });

    return (
      <div 
        className='App'
      >
        <BottomTabBar
          menuItems={menuItems}
        />
      </div>
    );
  }
}

export default App;

BottomTabBar.js :

import './BottomTabBar.css';
import '../Ripple.css';
import React, { Component } from 'react';

class BottomTabBar extends Component {
  constructor() {
    super();

    this.state = {
      content: null,
      selectedTabIndex: 0,
    };
  }

  handleClick = (index) => {
    // Changing content.
    this.setState({
      selectedTabIndex: index
    });
  }

  render() {
    // Putting them all.
    return (
      <div
        className='BottomTabBar'
      >
        <div
          className='Content'
        >
          {this.props.menuItems[this.state.selectedTabIndex].content}
        </div>

        <div
          className='IconsBar'
        >
          {
            this.props.menuItems.map((menuItem, i) => {
              return (
                <div
                  className="MenuItem Ripple"
                  key={i}
                  onClick={()=>this.handleClick(i)}
                >
                  <div
                    className="Gap"
                  />
                  <div
                    className="Icon"
                  >
                    <div
                      className={menuItem.faIcon}
                    />
                  </div>
                  <div
                    className="Gap"
                  />
                  <div
                    className="Text"
                  >
                    {menuItem.label}
                  </div>
                </div>
              )
            })
          }
        </div>
      </div>
    );
  }
}

export default BottomTabBar;

HomePage.js :

import './HomePage.css';
import React, { Component } from 'react';

class HomePage extends Component {
  constructor() {
    super();

    this.state = {
      counter: 0,
    };
  }

  componentDidMount() {
    this.counterInterval = setInterval(() => {
      this.setState((prevState) => ({
        counter: prevState.counter + 1
      }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.counterInterval);
  }

  render() {
    return (
      <div
        className='HomePage'
      >
        Home page counter: {this.state.counter}
      </div>
    );
  }
}

export default HomePage;

从上面的代码中你可能知道，我的主页只是一个简单的页面，计数器每秒自动递增:

普通主页:

问题是我的HomePage不能执着。如果我尝试在选项卡之间进行更改，它会起作用，但主页上的计数器始终重置为 0，这意味着我的主页和其他页面会重新创建，因为它是在选项卡之间导航的。这对我来说很奇怪，因为我创建了 <HomePage/>在App.js第 14 行。我做错了什么？如果您需要更多详细信息，请随时询问我。

也许我想做的更像是这个库:

https://github.com/lishengzxc/react-no-unmount-hide

我不太确定该库的作用，但我尝试了它，但它不起作用(只是抛出一些奇怪的错误)

Answer 1

这是预期的，因为每次导航 Home 选项卡时都会创建新的 HomePage 实例。

lifting the state up 就是这种情况。如果计数器状态应该持续存在，则应将其移动到选项卡导航上不会被破坏的组件，即 App:

class App extends Component {
  state = { counter: 0 };

  incrementCounter = () => setState((state) => ({ counter: state.counter + 1 }));

  render() {
    let menuItems = [];

    menuItems.push({
      label: 'Home',
      faIcon: 'fas fa-home',
      content: (
        <HomePage counter={this.state.counter} increment={this.incrementCounter} />
      )
    });
    ...

应该使用这些 Prop 而不是本地 HomePage 状态:

this.counterInterval = setInterval(this.props.increment);

和

Home page counter: {this.props.counter}

另一种方法是使用 Redux 或 React context API 来管理全局应用程序状态。