react中怎麼取得state

react中取得state的方法：先開啟對應的react程式碼檔案；然後在react中可以透過「this.state.{屬性}」的方式直接取得state即可。

本教學操作環境：windows7系統、react17.0.1版本、Dell G3電腦。

react中怎麼取得state？

在react中可以透過this.state.{屬性}的方式直接取得state，但當我們修改state的時候，往往有許多的坑需要注意。

以下有三個常見的陷阱：

1、不能直接修改state。

元件修改state，並不會重新觸發render。列如：

//错误
this.state.title='React';
正确修改方式是使用setState（）；
//正确
this.setState({title:'React'});

2、state的更新時異步的

呼叫setState時，元件state並不會立即改變，只是把要修改的狀態放入事件佇列當中，而react會最佳化真正的執行時機，並且處於本身的效能原因，可能會將多次setState的狀態修改合併成一次狀態修改。因此不要依靠目前的state來計算下一個state，因為當真正執行狀態修改時，依賴的this.state並不能保證是最新的state，因為react本身會把多次state合併成一次，這時this.state還是幾次state修改前的state，同樣也不能依賴目前的props計算下一個狀態，因為props的更新也是非同步。列對於電商類的應用中，在購物車裡，點擊一次購買按鈕，購買數量會加1，如果連續點擊兩次，會加2，而在rea​​ct合併修改為一次的情況下，相當與執行了如下程式碼：

Object.assign(
previousState,
{quantity:this.state.quantity+1},
{quantity:this.state.quantity+1},
)

於是後面覆蓋前面的操作，最終購買數量只加1，此時可以使用另一個函數作為參數的setState，這個函數有兩個參數，第一個參數是目前的最新狀態（本次元件狀態更新後的狀態）的前一個狀態preState（本次元件狀態修改前的狀態），第二個參數是目前最新的props。顯示如下：

//正确
this.setState((preState,props)=>({
counter:preState.quantity+1
}))

3、state的更新時一個合併的過程

當呼叫ssetState（）修改元件的狀態時，只需要傳入發生改變的state，而不是完整的state，因為元件state的更新時一個合併的過程，列如，一個元件的狀態為：

this.state({
title:'React',
content:'React is an wondeful JS library'
})

當只需要修改title時，只需要將修改過的title傳給setState即可：

this.setState({title:'ReactJs'});

react會合併最新的title到原來的狀態，同時保留原來狀態的content，最終合併state為：

this.state({
title:'ReactJs,
content:''React is an wondeful Js library
})

相關推薦：《react教學》

以上是react中怎麼取得state的詳細內容。更多資訊請關注PHP中文網其他相關文章！