ReactJS：显示情态动词和重新渲染

问题描述：

所以，我试图找出做到这一点的最好办法：显示模式或隐藏模式中反应ReactJS：显示情态动词和重新渲染

。在我的主网页我有很多的照片和我目前的状态设置为：

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和手动显示模式或隐藏模式，因此不改变状态。这个问题很明显，Unmount和ReceiveProps很难维护。

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

想法？

这是如何反应的设计工作。是否存在导致*渲染调用的问题？ –

模式是否需要在基类中？它可以是儿童组件吗？这与目前的设置说你的模态只能显示渲染发生，这将是一切的渲染。 –

就像一个快速优化。改变你的打开函数只调用setState一次'this.setState（{showModal：true，modalPhoto：e}）;'它的两倍性能！两个setstate调用将执行两个生命周期（包括渲染）。但你可以让它成为一个setState :) –

答

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

如上评论说，只要状态已经更新刷新视图的方式作出反应工程

丹阿布拉莫夫曾就如何处理与情态动词用写在堆栈溢出一个非常有趣的答案还原状态：How can I display a modal dialog in Redux that performs asynchronous actions?

试着从本文中获得一些启示。

希望这会有所帮助！

ReactJS：显示情态动词和重新渲染

相关推荐