在React應用程序中學習一些有關(guān)使用State的快速和重要提示，以幫助您確定哪種選項，適合您的環(huán)境。

 

 

不要害怕以setState（）開頭

首先，如果您是React的新用戶，或者開始使用新的React應用程序，請從React的內(nèi)置狀態(tài)功能開始。除非你完全確定新的應用程序?qū)⒊蔀橐粋€復雜的龐然大物，否則就要抵制從州管理解決方案開始的沖動。我提出這個建議有兩個原因。首先，如果你是React的新手，你應該在引入外部依賴之前專注于學習React的細節(jié)。Redux和MobX很棒，但是在學習React的同時學習狀態(tài)解決方案不僅會使你的學習曲線變得陡峭，而且會使你對兩者的理解變得混亂。熟悉React，然后，當時機成熟時，再添加一塊拼圖。

 

需要時，可以使用Redux或MobX ……

您正在構(gòu)建的應用程序可能會保持很長時間，并且您可能會發(fā)現(xiàn)setState（）是處理組件內(nèi)部和組件之間的UI更改的良好解決方案。那么什么時候考慮將Redux或MobX添加到您的應用中？

沒有硬性規(guī)定。復雜性傾向于蔓延到我們的應用程序中并突然停止。當您發(fā)現(xiàn)自己一次又一次地在組件之間傳遞狀態(tài)或者在級別之后冒出子組件狀態(tài)級別以便父級或更高級組件可以使用該狀態(tài)時，您將知道它是時候找到解決方案了。

Redux和MobX都圍繞實現(xiàn)一個或多個商店來管理狀態(tài)的原則進行組織。然后，組件將狀態(tài)更改分派給這些存儲，并在需要訪問狀態(tài)時訂閱狀態(tài)更改。這些模式為您的應用程序帶來了間接性和復雜性，但是當您的應用程序本身的狀態(tài)變得復雜時，最好選擇其中一種。

 

繼續(xù)使用setState（）是好的

最后，如果您決定實施狀態(tài)管理解決方案，請在某些情況下隨時繼續(xù)使用setState（）。 考慮一下：在子組件中按下一個按鈕來更新該組件的UI但是在層次結(jié)構(gòu)的其他地方?jīng)]有影響真的需要進入狀態(tài)存儲嗎？ 可能不是。

我第一次實現(xiàn)Redux時犯的錯誤之一是將所有內(nèi)容放入Redux存儲庫，為每個UI更改創(chuàng)建操作和縮減器。這有其自身形式的爬行復雜性，如果不加以控制，可能會讓您想知道您是否曾經(jīng)需要一個狀態(tài)管理解決方案。很多時候，即使使用Redux或MobX等解決方案，也可以繼續(xù)使用本地組件狀態(tài)。我個人的經(jīng)驗法則是使用完全獨立的本地狀態(tài)UI交互，或者使用可移植的組件，因此不依賴于全局存儲。

示例：在最近的項目中，我們創(chuàng)建了一個Map組件，該組件在應用程序的多個位置使用，以顯示事件詳細信息，當前位置等。組件依賴于狀態(tài)（通過Props）顯示它所顯示的數(shù)據(jù)，但我們使用本地狀態(tài)來管理內(nèi)部狀態(tài)，例如選擇了哪個映射引腳，以及是否應顯示信息窗口。構(gòu)造函數(shù)看起來像這樣：

class Map extends Component {

 

   constructor (props) {

 

       super(props)

 

       this.state = {

 

           showingInfoWindow: false,

 

           activeMarker: null,

 

           selectedPlace: {},

 

           map: null

 

       }

 

    }

 

   onMarkerClick (props, marker, e) {

 

       this.setState({

 

           selectedPlace: props,

 

           activeMarker: marker,

 

           showingInfoWindow: true

 

       })

 

    }

 

   onInfoWindowClose () {

 

       this.setState({

 

           showingInfoWindow: false,

 

           activeMarker: null

 

   })

 

    }

 

   onMapClicked (props) {

 

       if (this.state.showingInfoWindow) {

 

           this.setState({

 

                showingInfoWindow: false,

 

                activeMarker: null

 

           })

 

       }

 

    }

 

   onMapReady (mapProps, map) {

 

       const { agency, languageCode } = this.props

 

       this.setState({

 

           map: map

 

       })

 

       if (agency) {

 

           const assignees = agency.details.assignees

 

           if (assignees.regions) {

 

                assignees.contract.map(region=> {

 

                // Do things

 

                })

 

           }

 

       }

 

    }

 

}

 

結(jié)論

底線：可以使用本地狀態(tài)，特別是如果它可以幫助您保持全球狀態(tài)清潔和有條理。在開始一個新的React應用程序時，無論你是React新手還是經(jīng)驗豐富的專業(yè)人士，都可以嘗試從跳轉(zhuǎn)中添加狀態(tài)管理解決方案。不過，在此之前，請記住YAGNI并考慮等到時機成熟。