構建我的React/Redux應用程序以提高效率

Question

Im構建一個音頻工作站應用程序，該應用程序將顯示包含剪輯的軌道表。現在我有一個表格減速器，它返回一個表格對象。表格對象包含軌道對象，軌道對象包含剪輯對象。我有一個TableContainer訂閱表存儲。我的問題是我相信我的應用程序效率不高，因爲每次添加或操作剪輯時它都會重新渲染頁面。實際上，只有剪輯所在的特定軌道需要重新渲染對嗎？我該如何構建我的應用程序，以便每個小改動都不會呈現整個應用程序？

Answer 1

反應的力量只是重新呈現需要的東西（通過使用虛擬DOM進行比較和shouldComponentUpdate函數）。

在成爲性能問題之前，我不會過多考慮它。

如果是這樣，我會將曲目存儲在單獨的目錄中，並且不要將它傳遞給應用程序（主）組件。在您的Clip組件的mapStateToProps函數（如果使用react-redux）中，從道具中獲取它的名稱時從該狀態獲取該道。這樣，如果軌道變化很大（例如由於片段的異步獲取），則只會更新組件。

Answer 2

在任何組件的mapStateToProps中，不要選擇父對象作爲整體發送給組件。如果可能的話，選擇特定的屬性一直到葉值。如果你的TableContainer的render()本身不使用tracks數組，他們確保只有你使用的兄弟屬性被傳遞。

所以不是：

function mapStateToProps(state, props) { 
    return { 
    table: state.tables[props.tableId]; 
    } 
} 

務必：

function mapStateToProps(state, props) { 
    let table = state.tables[props.tableId]; 
    return { 
    name: table.name, 
    type: table.type 
    }; 

這使得陣營終極版更加挑剔的，當涉及到確定你的組件是否需要重新呈現。它會看到即使table由於clip更改而發生更改，但name和type都沒有更改。

但是，由於您的Table組件也可能呈現Track組件，因此您可能無法避免呈現調用。如果樹上任何位置的任何屬性被更改，則tracks陣列也會被更改。

這種情況下的解決方案是讓tracks陣列不包含整個track對象，而只包含一個軌道ID列表。然後，您可以將曲目存儲在表格旁邊，而對其中一個的更改不會影響另一個。請注意，這隻有在您不去並獲取並傳遞Table組件的mapStateToProps中的跟蹤對象時纔有效。您應該以這樣一種方式製作組件，即它接受其ID而不是實際對象作爲道具。這樣Table組件完全不依賴於軌道的內容。