react項(xiàng)目經(jīng)驗(yàn)(props與state)

使用props你可以吧任意類型的數(shù)據(jù)傳遞給組件挠乳;

組件對(duì)外公開(kāi)一個(gè)簡(jiǎn)單的屬性;(Props)來(lái)實(shí)現(xiàn)功能;

state和props主要的區(qū)別在于props是不可變的搀庶;而state可以根據(jù)與用戶交互來(lái)改變锯仪;這就是為什么有些容器組件

需要定義state來(lái)更新和修改數(shù)據(jù)疯汁。而子組件只能通過(guò)props來(lái)傳遞數(shù)據(jù)。

在子組件中卵酪;我們可以使用 this.props.name 來(lái)獲取父組件的state值幌蚊;

在父組件中使用state;并通過(guò)子組件上使用this.props將其傳遞到子組件上;

在render函數(shù)中溃卡;我們?cè)O(shè)置name和site來(lái)獲取父組件傳遞過(guò)來(lái)的數(shù)據(jù)溢豆;

props相當(dāng)于組件的數(shù)據(jù)流;它總是會(huì)從父組件向下傳遞至所有的子組件瘸羡;

通過(guò) setProps()方法改變組件屬性漩仙;觸發(fā)組件重新渲染;

React基于狀態(tài)實(shí)現(xiàn)對(duì)DOM控制和渲染犹赖;組件狀態(tài)分為兩種:一種是組件間的狀態(tài)傳遞队他,另一種是組件的

內(nèi)部狀態(tài);這兩種狀態(tài)使用props和state表示峻村。props用于從父組件到子組件的數(shù)據(jù)傳遞麸折;

組件內(nèi)部也有自己的狀態(tài):state,這些狀態(tài)只能在組件內(nèi)部修改。

React基于狀態(tài)實(shí)現(xiàn)對(duì)DOM控制和渲染粘昨;組件狀態(tài)分為兩種垢啼;

1:組件間的狀態(tài)傳遞;(props) props從父組件到子組建的數(shù)據(jù)傳遞

2:組件的內(nèi)部狀態(tài)张肾;? ? (state)? state只能定義在組件內(nèi)部芭析;定義組件的自己的狀態(tài)

React中的數(shù)據(jù)流是單向的;只會(huì)從父組件傳遞到子組件吞瞪;屬于props;

屬性props是父子組件間進(jìn)行狀態(tài)傳遞的接口馁启;React會(huì)向下遍歷整個(gè)組件樹(shù);并從新渲染使用這個(gè)屬性的組件芍秆;

創(chuàng)建元素:React.createElement()

克隆元素:React.cloneElement()

React.DOM.div()===React.createElement('div')

組件(component)是對(duì)一個(gè)或一系列ReactElement的封裝惯疙;在React中組件被認(rèn)為是最小的功能分離點(diǎn);

合理的利用組件浪听,可以解耦業(yè)務(wù)復(fù)雜度螟碎;可以更高效的完成UI的編寫(xiě);

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末迹栓,一起剝皮案震驚了整個(gè)濱河市掉分,隨后出現(xiàn)的幾起案子俭缓,更是在濱河造成了極大的恐慌,老刑警劉巖酥郭,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件华坦,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡不从,警方通過(guò)查閱死者的電腦和手機(jī)惜姐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)椿息,“玉大人歹袁,你說(shuō)我怎么就攤上這事∏抻牛” “怎么了条舔?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)乏矾。 經(jīng)常有香客問(wèn)我孟抗,道長(zhǎng),這世上最難降的妖魔是什么钻心? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任凄硼,我火速辦了婚禮,結(jié)果婚禮上捷沸,老公的妹妹穿的比我還像新娘摊沉。我一直安慰自己,他們只是感情好亿胸,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布坯钦。 她就那樣靜靜地躺著,像睡著了一般侈玄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上吟温,一...
    開(kāi)封第一講書(shū)人閱讀 52,696評(píng)論 1 312
  • 那天序仙,我揣著相機(jī)與錄音,去河邊找鬼鲁豪。 笑死潘悼,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的爬橡。 我是一名探鬼主播治唤,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼糙申!你這毒婦竟也來(lái)了宾添?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎缕陕,沒(méi)想到半個(gè)月后粱锐,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡扛邑,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年怜浅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蔬崩。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡恶座,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出沥阳,到底是詐尸還是另有隱情奥裸,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布沪袭,位于F島的核電站湾宙,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏冈绊。R本人自食惡果不足惜侠鳄,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望死宣。 院中可真熱鬧伟恶,春花似錦、人聲如沸毅该。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)眶掌。三九已至挡育,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間朴爬,已是汗流浹背即寒。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留召噩,地道東北人母赵。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像具滴,于是被迫代替她去往敵國(guó)和親凹嘲。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容