1. 程式人生 > >Telerik UI for ASP.NET AJAX教程:在React應用程式中管理狀態的3個基本技巧

Telerik UI for ASP.NET AJAX教程:在React應用程式中管理狀態的3個基本技巧

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

在React應用程式中學習一些有關使用State的快速和重要提示,以幫助您確定哪種選項,適合您的環境。

不要害怕以setState()開頭

首先,如果您是React的新使用者,或者開始使用新的React應用程式,請從React的內建狀態功能開始。除非你完全確定新的應用程式將成為一個複雜的龐然大物,否則就要抵制從州管理解決方案開始的衝動。我提出這個建議有兩個原因。首先,如果你是React的新手,你應該在引入外部依賴之前專注於學習React的細節。Redux和MobX很棒,但是在學習React的同時學習狀態解決方案不僅會使你的學習曲線變得陡峭,而且會使你對兩者的理解變得混亂。熟悉React,然後,當時機成熟時,再新增一塊拼圖。

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

您正在構建的應用程式可能會保持很長時間,並且您可能會發現setState()是處理元件內部和元件之間的UI更改的良好解決方案。那麼什麼時候考慮將Redux或MobX新增到您的應用中?

沒有硬性規定。複雜性傾向於蔓延到我們的應用程式中並突然停止。當您發現自己一次又一次地在元件之間傳遞狀態或者在級別之後冒出子元件狀態級別以便父級或更高階元件可以使用該狀態時,您將知道它是時候找到解決方案了。

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

繼續使用setState()是好的

最後,如果您決定實施狀態管理解決方案,請在某些情況下隨時繼續使用setState()。 考慮一下:在子元件中按下一個按鈕來更新該元件的UI但是在層次結構的其他地方沒有影響真的需要進入狀態儲存嗎? 可能不是。

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

示例:在最近的專案中,我們建立了一個Map元件,該元件在應用程式的多個位置使用,以顯示事件詳細資訊,當前位置等。元件依賴於狀態(通過Props)顯示它所顯示的資料,但我們使用本地狀態來管理內部狀態,例如選擇了哪個對映引腳,以及是否應顯示資訊視窗。建構函式看起來像這樣:

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
 
                })
 
            }
 
        }
 
    }
 
}

結論

底線:可以使用本地狀態,特別是如果它可以幫助您保持全球狀態清潔和有條理。 在開始一個新的React應用程式時,無論你是React新手還是經驗豐富的專業人士,都可以嘗試從跳轉中新增狀態管理解決方案。不過,在此之前,請記住YAGNI並考慮等到時機成熟。