下載Telerik UI for ASP.NET AJAX最新版本

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

不要害怕以setState（）開(kāi)頭

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

需要時(shí)，可以使用Redux或MobX ......

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

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

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

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

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

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

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

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)清潔和有條理。 在開(kāi)始一個(gè)新的React應(yīng)用程序時(shí)，無(wú)論你是React新手還是經(jīng)驗(yàn)豐富的專(zhuān)業(yè)人士，都可以嘗試從跳轉(zhuǎn)中添加狀態(tài)管理解決方案。不過(guò)，在此之前，請(qǐng)記住YAGNI并考慮等到時(shí)機(jī)成熟。