4.9 正確的使用State狀態

在React框架中，對于如何正確地使用狀態（State）定義了專屬的方式，具體就是通過setState()方法來更新狀態（State）。

這里需要強調的是，在React框架中是不允許直接操作狀態（State）屬性的，而且直接操作是無效的。如何理解呢？簡單說就是直接操作狀態（State）屬性時，雖然React框架不會報錯，但是不會產生任何效果。

下面，我們先通過一個具體的代碼實例講解一下，如果直接操作狀態（State）屬性會是什么效果，具體代碼如下：

【代碼4-18】（詳見源代碼目錄ch04-react-state-direct-change.html文件）

關于【代碼4-18】的說明：

●在第19~24行代碼定義的構造方法中，定義了一個狀態（State）屬性（count），并初始化為數值0，該屬性用于測試直接操作的方式。

●在第25~30行代碼定義的componentDidMount()方法中，通過使用setInterval()方法定義了一個計時器（this.timerId），并通過箭頭函數調用了count()方法。

●第31~33行代碼是自定義方法（count()）的實現過程，通過直接操作“count”屬性進行累加（+1）。其中，props參數（increment）定義在第47~49行代碼中。

●在第41行代碼中，通過render()方法將狀態（State）屬性（count）的值渲染到頁面中進行顯示。

●在第34~36行代碼定義的componentWillUnmount()方法中，通過使用clearInterval()方法清除了上面定義的計時器（this.timerId）。

測試網頁的效果如圖4.6所示。如圖中的箭頭所示，在第32行代碼中嘗試直接通過操作“count”屬性進行累加（+1），頁面中是看不到任何的效果，這說明該方式并不會重新渲染組件。

下面，我們通過另一個代碼實例，講解一下通過setState()方法操作狀態（State）屬性的正確方式，具體代碼如下：

【代碼4-19】（詳見源代碼目錄ch04-react-state-setState.html文件）

關于【代碼4-19】的說明：

●這段代碼與【代碼4-18】基本類似，不同之處就是第31~35行代碼所實現的自定義方法（count()）。

●在自定義方法（count()）中，第32~34行代碼通過setState()方法操作“count”屬性進行累加（+1）。

●另外，在setState()方法中定義了兩個參數“prevState”和“props”，分別用于傳遞前一個State狀態和Props參數。

測試網頁的效果如圖4.7所示。如圖中的箭頭所示，通過setState()方法操作狀態（State）屬性的正確方式，可以看到數值動態更新的效果。