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包會重新渲染，但沒有數據應該隨着模態打開和關閉而改變。

想法？

來源

2017-04-04 Daltron

這是如何反應的設計工作。是否存在導致頂級渲染調用的問題？ –

模式是否需要在基類中？它可以是兒童組件嗎？這與目前的設置說你的模態只能顯示渲染髮生，這將是一切的渲染。 –

就像一個快速優化。改變你的打開函數只調用setState一次'this.setState（{showModal：true，modalPhoto：e}）;'它的兩倍性能！兩個setstate調用將執行兩個生命週期（包括渲染）。但你可以讓它成爲一個setState :) –

也許你應該考慮使用一個組件來包裝你的模態並管理狀態。您的主要組件不會再更新。

如上評論說，只要狀態已經更新刷新視圖的方式作出反應工程

丹阿布拉莫夫曾就如何處理與情態動詞用寫在堆棧溢出一個非常有趣的答案還原狀態：How can I display a modal dialog in Redux that performs asynchronous actions?

試着從本文中獲得一些啓示。

希望這會有所幫助！

來源

2017-04-04 22:32:31 rouflak

ReactJS：顯示情態動詞和重新渲染

回答

相關問題