和props不同，一個組件的state可以隨時被改變，這些狀態將保存到組件被銷毀。話雖如此，你應該小心地改變組件的狀態不然你會遇到問題。
為什么要小心？好吧，你要知道改變一個組件的state或者props會自動調用重新渲染頁面，所以新的值會反映在界面中。意味著頻繁的更改將使你的代碼運行緩慢，這會大大降低用戶體驗。
React有特殊的更新state方法被稱為setState()它將新值合并到現有值中然后觸發重新渲染。所以修改我們的buttonClicked()方法使它在修改名字的同時保持國家不變：
src/pages/Detail.js
buttonClicked() {
const newState = {
name: chance.first()
};
this.setState(newState);
}
注意我已經去掉了對 this.forceUpdate()的調用 – 現在不需要了. 實際上，調用 forceUpdate()只在React沒有察覺到一個深度state變化時調用,所以我們現在不需要它了。
新的代碼完全實現了我們的想法: 它創建一個新的狀態 newState它含有新的姓名, 然后通過調用 this.setState()用來改變組件的state. 因為state的改變自動出發重新渲染， 你會在每次點擊按鈕時看到一個新的名稱，但國家不變。
在極端情況下你設置了太多的state或props變化，不停地調用render()會使頁面反應緩慢，react有個解決辦法：如果你創建了一個方法shouldUpdateComponent()然后返回false，你的組件就不會被重新渲染。
為了使用這個方法，你要么可以放一些業務邏輯在shouldUpdateComponent()按照你的需要返回true或者false。或者總是返回false然后調用this.forceUpdate()來重新渲染頁面。這個方法會強制調用render即使shouldUpdateComponent()返回false。
