React學習(五) Props和State

2021-10-25 22:20:22 字數 1656 閱讀 9611

react 是單向資料流。父元件可以把它的 state / props 通過 props 傳遞給它的子元件來實現元件之間的通訊。

props 本身是不可變的,但是有一種情形它貌似可變,即是將父元件的state作為子元件的props,當父元件的state改變,子元件的props也跟著改變,其實它仍舊遵循了這一定律:props是不可更改的。

//子元件

function

child

(props)

<

/h1>;}

//父元件

function

parent

(props)

<

/h1>

/>

<

/div>);

}reactdom.

render

('allen' childname=

'kimi'

/>

, document.

getelementbyid

('root'))

;

1、state介紹

react 把元件看成是乙個狀態機(state machines),而state就是狀態,用它來控制項本身自己的狀態。

react 裡只需更新元件的state,然後新的state就可以重新渲染使用者介面(不需要操作 dom)。

2、setstate函式

直接給state賦值來更新state,往往無法更新頁面ui。其實state更新需要setstate來重新渲染頁面。

當呼叫setstate函式的時候,react.js 會更新元件的狀態 state ,並且重新呼叫 render 方法,然後再把 render 方法所渲染的最新的內容顯示到頁面上

react.js 並不會馬上修改 state。而是把這個物件放到乙個更新佇列裡面,稍後才會從佇列當中把新的狀態提取出來合併到 state 當中,然後再觸發元件更新。

react setstate 更新是非同步的

3、元件生命週期

使用setstate來設定乙個動態clock 元件,而在許多元件的應用程式中,在銷毀時釋放元件所占用的資源非常重要。

每當 clock 元件第一次載入到 dom 中的時候,我們都想生成定時器,這在 react 中被稱為掛載。

每當 clock 生成的這個 dom 被移除的時候,我們也會想要清除定時器,這在 react 中被稱為解除安裝。

我們可以在元件類上宣告特殊的方法,當元件掛載componentdidmount()或解除安裝componentwillunmount():

class

clock

extends

react.component;}

componentdidmount()

componentwillunmount()

tick()

);}render()

.<

/h2>

<

/div>);

}}reactdom.

render

(>

, document.

getelementbyid

('root'))

;

React中state和props分別是什麼?

整理一下react中關於state和props的知識點。在任何應用中,資料都是必不可少的。我們需要直接的改變頁面上一塊的區域來使得檢視的重新整理,或者間接地改變其他地方的資料。react的資料是自頂向下單向流動的,即從父元件到子元件中,元件的資料儲存在props和state中,這兩個屬性有啥子區別呢...

React中state和props分別是什麼?

整理一下react中關於state和props的知識點。在任何應用中,資料都是必不可少的。我們需要直接的改變頁面上一塊的區域來使得檢視的重新整理,或者間接地改變其他地方的資料。react的資料是自頂向下單向流動的,即從父元件到子元件中,元件的資料儲存在props和state中,這兩個屬性有啥子區別呢...

React中props和state相同點和不同點

朋友們,我想死你們了,最近這幾天忙著和病魔作鬥爭所以沒怎麼寫部落格,今天感覺好點了,趕緊來寫一波,就是這木敬業。今天我們來討論討論props和state相同點和不同點 首先我來概要說明一下這兩者 props props是乙個從外部傳進元件的引數,由於react具有單向資料流的特性,所以他的主要作用是...