React中state和props分別是什麼?

2022-08-31 05:09:12 字數 3925 閱讀 6068

***

整理一下react中關於state和props的知識點。

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

react的核心思想就是元件化思想,頁面會被切分成一些獨立的、可復用的元件。

元件從概念上看就是乙個函式,可以接受乙個引數作為輸入值,這個引數就是props,所以可以把props理解為從外部傳入元件內部的資料。由於react是單向資料流,所以props基本上也就是從服父級元件向子元件傳遞的資料。

假設我們現在需要實現乙個列表,根據react元件化思想,我們可以把列表中的行當做乙個元件,也就是有這樣兩個元件:

先看看

import item from "./item";

export default class itemlist extends react.component)}}

列表的資料我們就暫時先假設是放在乙個data變數中,然後通過map函式返回乙個每一項都是的陣列,也就是說這裡其實包含了data.length元件,資料通過在元件上自定義乙個引數傳遞。當然,這裡想傳遞幾個自定義引數都可以。

中是這樣的:

export default class item extends react.componentli>)}}

render函式中可以看出,元件內部是使用this.props來獲取傳遞到該元件的所有資料,它是乙個物件,包含了所有你對這個元件的配置,現在只包含了乙個item屬性,所以通過this.props.item來獲取即可。

props經常被用作渲染元件和初始化狀態,當乙個元件被例項化之後,它的props是唯讀的,不可改變的。如果props在渲染過程中可以被改變,會導致這個元件顯示的形態變得不可**。只有通過父元件重新渲染的方式才可以把新的props傳入元件中。

在元件中,我們最好為props中的引數設定乙個defaultprops,並且制定它的型別。比如,這樣:

item.defaultprops = ;

item.proptypes = ;

關於proptypes,可以宣告為以下幾種型別:

optionalarray: proptypes.array,

optionalbool: proptypes.bool,

optionalfunc: proptypes.func,

optionalnumber: proptypes.number,

optionalobject: proptypes.object,

optionalstring: proptypes.string,

optionalsymbol: proptypes.symbol,

注意,boolfunc是簡寫。

props是乙個從外部傳進元件的引數,主要作為就是從父元件向子元件傳遞資料,它具有可讀性和不變性,只能通過外部元件主動傳入新的props來重新渲染子元件,否則子元件的props以及展現形式不會改變。

state是什麼呢?

state is similar to props, but it is private and fully controlled by the component.

乙個元件的顯示形態可以由資料狀態和外部引數所決定,外部引數也就是props,而資料狀態就是state

export default class itemlist extends react.component

} render())}}

首先,在元件初始化的時候,通過this.state給元件設定乙個初始的state,在第一次render的時候就會用這個資料來渲染元件。

state不同於props的一點是,state是可以被改變的。不過,不可以直接通過this.state=的方式來修改,而需要通過this.setstate()方法來修改state

比如,我們經常會通過非同步操作來獲取資料,我們需要在didmount階段來執行非同步操作:

componentdidmount());  

}}

當資料獲取完成後,通過this.setstate來修改資料狀態。

當我們呼叫this.setstate方法時,react會更新元件的資料狀態state,並且重新呼叫render方法,也就是會對元件進行重新渲染。

注意:通過this.state=來初始化state,使用this.setstate來修改stateconstructor是唯一能夠初始化的地方。

setstate接受乙個物件或者函式作為第乙個引數,只需要傳入需要更新的部分即可,不需要傳入整個物件,比如:

export default class itemlist extends react.component

} componentdidmount())

}}

在執行完setstate之後的state應該是

setstate還可以接受第二個引數,它是乙個函式,會在setstate呼叫完成並且元件開始重新渲染時被呼叫,可以用來監聽渲染是否完成:

this.setstate(,()=>console.log('setstate finished'))

state的主要作用是用於元件儲存、控制以及修改自己的狀態,它只能在constructor中初始化,它算是元件的私有屬性,不可通過外部訪問和修改,只能通過元件內部的this.setstate來修改,修改state屬性會導致元件的重新渲染。

state是元件自己管理資料,控制自己的狀態,可變;

props是外部傳入的資料引數,不可變;

沒有state的叫做無狀態元件,有state的叫做有狀態元件;

多用props,少用state。也就是多寫無狀態元件。

React中prop和state的區別

本文章已收錄於 react知識庫 需要理解的是,props是乙個父元件傳遞給子元件的資料流,這個資料流可以一直傳遞到子孫元件。而state代表的是乙個元件內部自身的狀態 可以是父元件 子孫元件 改變乙個元件自身狀態,從語義上來說,就是這個元件內部已經發生變化,有可能需要對此元件以及元件所包含的子孫元...

React中state和props分別是什麼?

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

react中state與setstate的使用

我們可以利用state來定義一些變數的初始值 放在construcor裡 this.state 要更改state裡的值,注意要遵循react裡immutable規範,state不允許我們做任何改變,只能通過setstate來更改 const list this state.list list.spl...