React怎麼判斷什麼時候該重新渲染元件？

react因為他的效能而著名。因為他有乙個虛擬dom層並且只有在需要時才更新真實dom。即使是同樣地資訊這也比一直直接更新dom要快很多。但是，react的智慧型僅此而已（目前為止），我們的任務是知道react的預期行為以及限制，這樣我們才不會意外損失效能。

我們需要關注的一方面是react如何決定什麼時候重新渲染元件。不是重新渲染dom節點，只是呼叫render方法來改變虛擬dom。我們可以通過告訴react什麼時候需要渲染什麼時候不需要渲染來幫助react。讓我們依次來看看這些。

只有在元件的state變化時才會出發元件的重新渲染。狀態的改變可以因為props的改變，或者直接通過setstate方法改變。元件獲得新的狀態然後react決定是否應該重新渲染元件。不幸的是，react難以置信簡單地將預設行為設計為每次都重新渲染。

元件改變？重新渲染。父元件改變？重新渲染。一部分沒有導致檢視改變的props改變?重新渲染。

class todo extends react.component 
});}, 1000);
}render() 
}

在這個（非常刻意的）例子中，todo將會每秒重新渲染依次，即使render方法根本沒有使用unseen。事實上，unseen值甚至都不改變。你可以在codepen裡檢視這個例子的實際版本。

好吧，但是每次都重新渲染沒有什麼幫助。

我的意思是，我非常感謝react的細心謹慎。如果狀態改變但是元件沒有正確渲染的話更糟。權衡之下，每次都重新渲染絕對是乙個安全的選擇。

但是重新渲染的時間成本看起來非常昂貴（例子裡非常誇張地表現了出來）。

是的，在不必要的時候重新渲染會浪費迴圈並且不是乙個好的想好。但是，react不能知道什麼時候可以安全的跳過重新渲染，所以react無論是否重要每次都重新渲染。

我們如何告訴react跳過重新渲染？

那就是第二點要說的內容。

shouldcomponentupdate方法預設返回true，這就是導致每次更新都重新渲染的原因。但是你可以在需要優化效能時重寫這個方法來讓react更智慧型。比起讓react每次都重新渲染，你可以告訴react你什麼時候不像觸發重新渲染。

當react將要渲染元件時他會執行shouldcomponentupdate方法來看它是否返回true（元件應該更新，也就是重新渲染）。所以你需要重寫shouldcomponentupdate方法讓它根據情況返回true或者false來告訴react什麼時候重新渲染什麼時候跳過重新渲染。

當你使用shouldcomponentupdate方法你需要考慮哪些資料對與重新渲染重要。讓我們回到這個例子。

正如你所看到的，我們只想在title和done屬性改變的時候重新渲染todo。我們不關心unseen是否改變，所以我沒有把它包含在shouldcomponentupdate方法中。

當react渲染todo元件（通過setstate觸發）他會首先檢查狀態是否改變（通過props和state）。假設狀態改變了（因為我們顯式地呼叫了setstate所以這會發生）react會檢查todo的shouldcomponentupdate方法。react會根據shouldcomponentupdate方法返回值為true或者false來決定從**渲染。

更新後的**仍然會每秒呼叫一次setstate但是render只有在第一次載入時（或者title或done屬性改變後）才會呼叫。你可以在這裡看到。

看起來有很多任務作去做。

是的，這個例子非常冗長因為有兩個屬性（title和done）需要關注並且只有乙個可以忽略（unseen）。根據你的資料可能僅檢查乙個或兩個屬性並且忽略其他會更有意義。

重要提示

當子元件的的state變化時, 返回false並不能阻止它們重渲染。

– facebook的react文件

這作用於子元件的狀態而不是他們的props。所以如果乙個子元件內部管理了一些他自己的狀態（使用他自己的setstate），這仍然會更新。但是如果父元件的shouldcomponentupdate方法返回了false就不會傳遞更新後的props給他的子元件，所以子元件不會重渲染，即使他們的props變化了。

編寫並且在shouldcomponentupdate方法中執行計算的時間成本可能會很昂貴，所以你需要確保值得做。在寫shouldcomponentupdate方法前你可以測試react乙個週期缺省會消耗多少時間。有了這個資訊做參考，在做效能優化時你可以做乙個不盲目的決定。

使用react的效能工具去發現浪費的週期：

perf.start()
// do the render
perf.stop()
perf.printwasted()

哪乙個元件浪費了很多渲染週期？你怎麼通過shouldcomponentupdate方法讓他們更智慧型？試著使用效能測試工具來比較他們的效能。

React怎麼判斷什麼時候該重新渲染元件？

什麼時候該休息

ajax該什麼時候用

什麼時候重分布直連

React怎麼判斷什麼時候該重新渲染元件？

什麼時候該休息

ajax該什麼時候用

什麼時候重分布直連

相關推薦