Tabs 仅在第一次激活时挂载 Tab 内容

Question

我只想在第一次激活时加载选项卡内容，之后内容保留在 DOM 中

这就是我所拥有的

  <Tabs defaultActiveKey={1} animation={false} id="my-tabs" mountOnEnter unmountOnExit>
    <Tab eventKey={1}>
      <div>content1</div>
    </Tab>
    <Tab eventKey={2}>
      <div>content1</div>
    </Tab>
  </Tabs>

它工作正常，但切换选项卡之间存在延迟，因为我拥有的内容非常大，我只想在选项卡第一次激活时呈现一次。

有没有办法实现这一目标？我正在使用react-bootstrap 0.30.10

Answer 1

这听起来像是 React 提供的“避免协调”选项的一个很好的用例。

这是文档中相关部分的链接。

本质上，有一个名为shouldComponentUpdatetrue 的生命周期事件。当您将其更改为 false 时，它​​会告诉 React 不要通过标准协调流程（即“diff”检查）运行组件。

与任何生命周期方法一样，您可以为其创建条件语句。

对于在第一次渲染后应该完全静态的组件，这实际上就是您所需要的：

class YourComponent extends React.Component {
  ...
  shouldComponentUpdate() {
    return false;
  }
  ...
}

但是，对于更一般的用例，您需要根据组件的 props 和/或状态编写条件语句：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
        // Your state
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
        // A conditional statement to determine whether
        //    this component should check for updates or not
  }

  render () {
    return (
        <div>
          {/* Your JSX*/}
        </div>
    )
  }