ReactJS：显示模态和再现

Question

所以，我试图找出最好的方法来做到这一点：

在反应中显示模态或隐藏模态。在我的主页上，我有很多照片，我目前的状态设置是：

export default class Main extends TrackerReact(Component) {
  constructor(props) {
   super(props);
   this.state = {
     showModal: false,
     modalPhoto: {},
   };

   this.close = this.close.bind(this);
   this.open = this.open.bind(this);
}
close() { this.setState({ showModal: false }); } // basic modal close
open(e) {
  this.setState({ modalPhoto: e });
  this.setState({ showModal: true });
}

当我将showModal设置为true时，它将传递到引导模式：

<Modal
  show={this.props.show} >
  // ...loads modalPhoto form main state.modalPhoto
</Modal>

问题：每次我打开模态，它都会改变主状态，并重新呈现主页面。阻止这种重新渲染发生的最佳实践方法是什么？我试过：

// in the main component
shouldComponentUpdate(nextProps, nextState) {
  if (this.state.showModal !== nextState.showModal) {
    return false;
  } else {
    return true;
  } // PS. I know this is wrong, but I was desperate...

我还考虑使用jquery在外部手动显示模式或隐藏模式，从而不改变状态。问题很明显，卸载和接收道具很难维护。

我还知道，如果数据发生更改，TrackerResact包将重新渲染，但在模式打开和关闭时不应更改任何数据。

思想？

Answer 1

也许你应该考虑使用一个组件来包装你的模态并管理状态。您的主要组件将不再更新。

正如上面的评论所说，一旦状态更新，就会刷新视图，这是React的工作方式

Dan Abramov在Stack Overflow上写了一个非常有趣的答案，关于如何处理具有redux状态的模态：如何在Redux中显示执行异步操作的模态对话框？

试着从这篇文章中得到一些启示。

希望这有帮助！