React render方法在每次父級更換時調用

我有一個反應組件，我注意到每當所有者組件呈現時都會重新渲染，即使傳遞的道具沒有更改。React render方法在每次父級更換時調用

這是正常的行爲嗎？我認爲一個組件只有在所有者發送新道具時纔會放棄，即道具改變時會有不同的值或內部狀態改變。

假設上述是真的，是否有任何技巧來調試什麼是改變導致組件重新渲染？

2015-09-08 Mitch VanDuyn

您可以添加代碼示例嗎？ – Pavlo

Yea代碼會很好 - 同樣如果渲染函數在某些狀態更新後被調用並且渲染函數包含子組件，那麼它也將被重新渲染 –

它是一個非常普遍的問題。我注意到這個組件非常複雜。下面的答案似乎意味着我錯了，而且渲染總是被調用。 –

React的要點是在真正的DOM上面使用虛擬DOM。您的React Component中的render()方法用於計算新VD，將其與之前進行比較，並將差異應用於AD。例如，不同的是， React.DOM.div以及另一個組件的render()方法中的組件--React需要計算組件的VD - 顯然，由於它是render()方法 - 即使沒有通過任何道具。

但是，您可以明確告訴React組件，它是否應該調用它的render()方法 - 使用shouldComponentUpdate()鉤子。在React.createClass()符號，你可以使用PureRenderMixin，這是什麼，除了下面的代碼注入：

import shallowEqual from 'react/lib/shallowEqual'; 

shouldComponentUpdate(nextProps, nextState) { 
    return !shallowEqual(nextProps, this.props) || !shallowEqual(nextState, this.state); 
}

有一些方法來做到這一點的ES6符號 - 例如繼承自PureRenderComponent，包含上面的鉤子。

另請參見https://facebook.github.io/react/docs/advanced-performance.html

來源

2015-09-08 17:42:10

對PureRenderMixin的引用使這一點變得更加清晰......我認爲我的困惑很可能是因爲我認爲React總是假定事情是純粹的，除非您另有告知，而不是其他方式謝謝 –

React render方法在每次父級更換時調用

回答

相關問題