ReactJS，使用相同的參數調用setState

Question

我一直在閱讀React文檔並碰到shouldComponentUpdate()。我的理解是每次調用setState()時，該組件的重新渲染都將被更新。

我的問題是，如果要更新的值是SAME作爲當前狀態值，是否會觸發重新呈現事件？或我必須手動檢查當前值和值將在shouldComponentUpdate()

Answer 1

官方更新陣營文檔狀態：

的默認行爲是對每一個狀態變化重新渲染...

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

這意味着通過默認，render()將被執行，如果任何一個組件的state或的210值發生變化。

您可以使用shouldComponentUpdate()覆蓋此默認行爲。這是一個僅在狀態值更改時才更新的示例。

shouldComponentUpdate(nextProps, nextState) { 
    return this.state.someValue !== nextState.someValue; 
} 

注意：此示例完全忽略了props。所以，對props的任何更改都不會觸發render()。

Answer 2

我不知道我是否正確理解你的問題，但只有在虛擬dom和真實dom之間存在差異時纔會重新呈現。

而且，Jyothi在他的回答中提到，render方法將被調用，而不管集合狀態函數中傳遞的值是什麼，但是渲染將取決於render方法返回的內容。

Answer 3

在@ Jyothi的回答中增加了更多關於執行shouldComponentUpdate()以跳過不必要的重新渲染，React 15.3他們引入了一個新概念PureComponent。從reactjs docs

它們之間的區別是，React.Component沒有實現 shouldComponentUpdate（），但React.PureComponent與 淺道具和狀態對比實現它。

這使得僅通過實施PureComponent而不是通常的Component跳過的類組件render不必要的調用。有與PureComponent幾個注意事項雖然，約React.PureComponent的shouldComponentUpdate()文檔：

...只有比較淺的 對象。如果這些數據結構包含複雜的數據結構，則可能會產生 誤差更大的差異。

...跳過整個組件子樹的prop更新。確保所有 兒童組件都是「純」的。

使用PureComponent可以在某些情況下提高應用程序的性能。此外，它還會強制您將對象保持爲儘可能簡單，甚至更好，不可變，這可能有助於簡化應用程序結構並使其更加簡潔。