使用 React 和 React-bootstrap 应用程序进行不必要的模态渲染答案

【问题标题】：Unnecessary modal renders with React and React-bootstrap app使用 React 和 React-bootstrap 应用程序进行不必要的模态渲染
【发布时间】：2017-10-13 06:43:00
【问题描述】：

我正在学习 React，并且正在开发一个简单的小应用程序。该应用程序包含一行，其中包含选项卡和下拉菜单。从该下拉列表中，您可以打开用于添加/删除/编辑所述选项卡的模式。

我注意到所有模式都会在应用程序启动时调用它们的渲染方法，并且每次我点击任何选项卡时，甚至是当前选择的选项卡。我对 React 真的很陌生，所以我很困惑这是否应该发生。该应用程序似乎按预期工作。

以下是代码的超级简化版本，仅包含必要的部分：

app.js

class App extends React.Component {
  // ...
  // state is { modals: { addTab: false, editTab: false, removeTab: false } }

  closeModal = (modalState) => {
    const obj = this.state.modals;
    obj[modalState] = false;
    this.setState(obj);
  }

  render() {
    <div className="App container-fluid">
      // ...
      <AddTabModal showModal={this.state.modals.addTab} closeModal={this.closeModal} ... />
      // ...
    </div>
  }
}

AddTabModal.js

class AddTabModal extends React.Component {
  // ...
  render() {
    // This gets triggered every time I click any tab or the dropdown menu.
    // Even if the modal is not visible.
    console.log('Render add tab modal');
    return (
      <Modal show={this.props.showModal} ... >
        // ...
        <Modal.Footer>
          <Button onClick={() => { this.props.closeModal('addTab'); }}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }
}

我还读到在 JSX 中使用箭头函数是一种不好的模式，但是如果我将按钮更改为：

<Button onClick={this.props.closeModal('addTab')}>Close</Button>

它应该仍然只在我单击按钮时运行，对吗？但是该应用程序从一开始就完全锁定，并且出现“超出最大更新深度”错误。我相信这与上述问题有关，因为我在应用程序中没有任何 componentWillUpdate/componentDidUpdate 方法。

【问题讨论】：

能否在您的代码中包含 Modal 导入？

标签： javascript reactjs react-bootstrap

【解决方案1】：

您可以做几件事来优化：

确保传递给模态的所有道具都是不可变的
将close函数提取到类方法中
使用PureComponent 来阻止渲染，除非道具发生变化

class AddTabModal extends PureComponent {
  // ...
  onCloseModal = () => {
    this.props.closeModal('addTab');
  }

  render() {
    // This gets triggered every time I click any tab or the dropdown menu.
    // Even if the modal is not visible.
    console.log('Render add tab modal');
    return (
      <Modal show={this.props.showModal} ... >
        // ...
        <Modal.Footer>
          <Button onClick={this.onCloseModal}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }
}

我还读到在 JSX 中使用箭头函数是一种不好的模式，但是如果我将按钮更改为：

<Button onClick={this.props.closeModal('addTab')}>Close</Button>

这是因为() => this.props.closeModal('addTab') 创建了一个新函数，调用该函数时将关闭模态。但是，如果您只有 this.props.closeModal('addTab')，则会立即调用关闭模式函数。

避免额外匿名函数的方法是将其提取到上面代码中的类方法中。

【讨论】：