反應路線而不重新渲染

Question

所以我有一個簡單的React/Flux應用程序使用Backbone的路由器。我有一個用戶創建對象的情況，路徑從/object/new更新爲/object/:id。但是，不需要重新呈現頁面，因爲組件是相同的，並且由於在ajax-create調用返回後關聯的商店更新，它會自行更新。

目前，我剛剛修補了路由器以暴露一個方法，只是更新網址，並沒有實際打到路由特定的方法。這感覺很不好，並沒有真正解決需要添加/移除一些組件（即，小部件）的情況（至少它消除了知道哪些組件需要被呈現在路由器外的責任），但是主要UI不需要重新渲染。

因此，這讓我有三個問題：

1. 什麼是處理不需要更改組件URL的變化做出反應呢？
2. 那麼只能添加/更改某些組件的url更改呢？
3. 商店應負責發起路由事件嗎？

Answer 1

React的一個主要價值主張是重新渲染非常便宜。

這意味着您可以放棄過度而沒有負面影響。這是來自Backbone的完整的180，其中渲染非常昂貴，這導致您正在尋找的邏輯，即如何避免渲染。

在引擎蓋下，React是否通過將虛擬DOM與DOM區分開來檢查你。換句話說：當您在React中使用暴露的渲染函數時，您並不真正渲染DOM，而只是用Javascript描述DOM的新狀態。

實際上，這意味着如果您不計算許多值，您可以不停地以每秒60幀的速度重新渲染，而無需執行任何優化步驟。

這使您可以自由地完全「重新呈現」，即使您的應用中只有極少數事情實際發生了變化。

因此，我的建議是實際上不嘗試阻止React重新渲染整個頁面，即使沒有任何更改。這種邏輯會增加複雜性，您可以通過無條件地重新修改路由更改來避免這種複雜性。從概念的角度來看，這也是有意義的，因爲路由只是全局應用狀態。

能夠做到這一點的自由是使React真棒的主要原因之一。

這是「過早優化是萬惡之源」的經典案例。

例如：我有時會全局重新渲染mouseMove事件上的整個DOM層次結構，並且沒有可觀察到的性能影響。

作爲一般規則，將再投放看作零成本操作。現在，您可能會在React組件中執行一些昂貴的操作。如果是這種情況，您可以使用React的生命週期方法按需執行這些操作。特別看看shouldComponentUpdate,componentWillReceiveProps and componentWillUpdate。

如果您使用Flux並且堅持不變性範例，那麼您可以做出非常便宜的參考性狀態平等檢查和支持按需工作的道具。有了這個，你可以提高性能。

隨着shouldComponentUpdate方法，如果它需要太多的計算能力，您可以阻止渲染調用。但是，如果由於您自己實施的昂貴操作而導致性能提高，我只會這樣做。

在你的情況下，我會在根組件中注入路由狀態，將它們作爲道具注入到根的孩子中，並在其上執行shouldComponentUpdate以防止呈現。