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时，它会传递给bootstrap-react模式：

<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绕过外面并手动显示模态或隐藏模态，因此不会改变状态。这方面的问题很明显，Unmount和ReceiveProp很难维护。

我也知道如果数据发生变化，TrackerReact包将重新渲染，但是没有数据应该随着模态打开和关闭而改变。

思想？

Answer 1

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

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

Dan Abramov在Stack Overflow上写了一个关于如何处理具有redux状态的Modals的非常有趣的答案：How can I display a modal dialog in Redux that performs asynchronous actions?

尝试从这篇文章中获得灵感。

希望这有帮助！

ReactJS：显示模态和重新渲染

1 个答案: