在沒有 setState 的情況下反應推送到狀態變量

Question

最近我一直在研究 React 應用程序。

在其中一個加載緩慢的頁面中，我發現有一些狀態更新，以及那些不打算向最終用戶顯示的變量，並且稍后在引發某些事件時檢查它們。

因為那些是數組，所以我直接改變狀態和事件而不“設置狀態”（我知道根本不推薦改變變量！）。 后來當事件被引發時，狀態變量有正確的數據，並且由於刪除了冗余的“setState”，頁面速度有了顯着的提升，問題得到了解決。

任何人都對“setState”有類似的反應？ 你怎么看待這件事？

Answer 1

...我發現狀態有一些更新，而那些不打算向最終用戶顯示的變量......

那么它們不應該是狀態的一部分，它們應該只是實例上的屬性（在基於類的組件中，我假設您正在使用它；您在功能組件中關閉的變量）。 state應該只包含更改時會導致重新渲染的內容。 出於這個原因，您應該只通過setState更改它們，以便觸發渲染。 您違反了規則，因為您正在更改的內容與渲染無關。

永遠不要直接改變state對象（或它引用的任何對象）。 但是你可以改變非狀態屬性（或者你關閉的東西），這很好。

Answer 2

如果您需要將這些變量存儲在實際狀態但它們不必觸發渲染，您可能需要實現shouldComponentUpdate lyfecycle 回調：

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

這樣做，如果所有觸發渲染的狀態屬性都被檢查，其他狀態屬性將不會觸發渲染。 但仍將在 state object 中可用。

為了提高性能，您可以對將要渲染的子元素（如果它們是組件）實施相同的檢查。

shouldComponentUpdate(nextProps, nextState) {
        return nextProps.myPropThatTriggersRender != this.props.myPropThatTriggersRender;
    }

來自 React 的文檔：

使用 shouldComponentUpdate() 讓 React 知道組件的輸出是否不受當前 state 或 props 變化的影響。 默認行為是在每次狀態更改時重新渲染，在絕大多數情況下，您應該依賴默認行為。