React系列 狀態(State)和生命週期

2021-09-16 12:33:51 字數 2276 閱讀 7760

而這就就關聯到了我們這次的主題---狀態(state)

狀態(state) 和 屬性(props) 類似,都是乙個元件所需要的一些資料集合,但是它是私有的,並且由元件本身完全控制,可以認為它是元件的「私有屬性(或者是區域性屬性)」。

如果想要使用狀態(state)的話,則需要我們在構建元件的時候是要以類元件為形式的。

針對直接以類元件形式構造的元件不需要變化,那麼針對函式式元件該如何轉化呢?

例如:

class clock extends react.component 

}

上面示例就是乙個簡單的類元件clock。

1) 替換 render() 方法中的 this.props.date 為 this.state.date:

class clock extends react.component 

}

2) 新增乙個 類建構函式(class constructor) 初始化 this.state:

class clock extends react.component ;

} render()

}

❤ 注意我們如何將 props 傳遞給基礎建構函式:
constructor(props) ;

}

3) 移除 元素中的 date 屬性:

reactdom.render(

, document.getelementbyid('root')

);

通過上面的步驟就可以實現新增state到類元件了,最終結果:

class clock extends react.component ;

} render()

}reactdom.render(

, document.getelementbyid('root')

);

this.setstate();
關於如何正確使用state以及setstate() 有三個方面需要注意:

不要直接修改 state(狀態)

正如上面提到的如何修改state那樣,在初始化後,如果修改的話只能通過setstate方法進行修改。

state(狀態) 更新可能是非同步的

react 為了優化效能,有可能會將多個 setstate() 呼叫合併為一次更新。

// 錯誤

this.setstate();

要彌補這個問題,使用另一種 setstate() 的形式,它接受乙個函式而不是乙個物件。這個函式將接收前乙個狀態作為第乙個引數,應用更新時的 props 作為第二個引數:

// 正確

this.setstate((prevstate, props) => ());

state(狀態)更新會被合併

當你呼叫 setstate(), react 將合併你提供的物件到當前的狀態中。所以當state是乙個多鍵值的結構時,可以單獨更新其中的乙個,此時會進行「差分」更新,不會影響其他的屬性值。

生命週期就是指乙個物件的生老病死。
而元件的生命週期則是這個元件從建立到銷毀的乙個過程。在這個過程中會有不同的階段,從而會產生一些對應的生命週期函式來供我們使用,以便能夠進行一些渲染、更新等處理。

可以簡單分為幾個階段:

執行中狀態

銷毀階段

無論作為父元件還是子元件,它都無法獲悉乙個元件是否有狀態,同時也不需要關心另乙個元件是定義為函式元件還是類元件。

這就是 state(狀態) 經常被稱為 本地狀態 或 封裝狀態的原因。 它不能被擁有並設定它的元件 以外的任何元件訪問。

乙個元件可以選擇將 state(狀態) 向下傳遞,作為其子元件的 props(屬性):

這通常稱為乙個「從上到下」,或者「單向」的資料流。任何 state(狀態) 始終由某個特定元件所有,並且從該 state(狀態) 匯出的任何資料 或 ui 只能影響樹中 「下方」 的元件。

如果把元件樹想像為 props(屬性) 的瀑布,所有元件的 state(狀態) 就如同乙個額外的水源匯入主流,且只能隨著主流的方向向下流動。

在 react 應用中,乙個元件是否是有狀態或者無狀態的,被認為是元件的乙個實現細節,隨著時間推移可能發生改變。你可以在有狀態的元件中使用無狀態元件,反之亦然。

學習react改變state狀態

第乙個 父級類元件class 可以傳參name 等於把自己傳過去 子類元件通過props 接收 然後通過 this.props.name.state改變狀態 class deng extends react.component componentdidmount componentdidupdate...

react 單向資料流和狀態提公升(state)

1.父元件傳遞給子元件props 唯讀 props 是一種從父級向子級傳遞資料的方法。無論是使用函式或是類來宣告乙個元件,它決不能修改它自己的props。function sum a,b 類似於上面的這種函式稱為 純函式 它沒有改變它自己的輸入值,當傳入的值相同時,總是會返回相同的結果。子元件要想父...

React開發之Porps和State

最近專案一直在用react,所以把自己學的東西都總結下來。在實際開發中,我們使用兩種資料來控制乙個元件 props和state。props是在父元件中指定,而且一經指定,在被指定的元件的生命週期中則不再改變。對於需要改變的資料,我們需要使用state。通過在不同的場景使用不同的屬性定製,可以盡量提高...