2019-05-01 React組件通信

父子

  1. 父子通信(回調(diào)函數(shù))[組件通信]

父傳子:父組件傳一個函數(shù)給子組件,子組件在恰當(dāng)?shù)臅r候調(diào)用

子傳父:1.父組件將一個函數(shù) fn 作為子組件的 props 傳給子組件
2.子組件在恰當(dāng)?shù)臅r候調(diào)用這個 fn厦酬,并且把數(shù)據(jù)放在 fn 的參數(shù)里

龜兔賽跑的例子

  1. 問爺孫組件如何通信?
    爺爺傳給爸爸,爸爸再傳給孫子

父子通信例子


eventHub發(fā)布訂閱模式

首先建立一個管家,然后需要操作就通知管家,管家操作完后發(fā)給App,App再逐一發(fā)給下面的人
花錢的例子


Redux

花錢Redux的例子

Redux特點:

  1. 所有的動作通過事件來溝通
  2. 所有數(shù)據(jù)放在頂層

Redux缺點:

  1. 將事件名和參數(shù)做了約束,每個事件都必須有事件名和參數(shù),所有事件都要列入列表內(nèi),否則不接受
  2. 不能用State,只有以props的形
    式去用State

Redux優(yōu)點:

  1. 把event歸類,不能瞎命名
  2. 要求所有數(shù)據(jù)是只讀,任何組件不能修改根級數(shù)據(jù),但是沒法禁止
  3. 制造一些概念讓不好好學(xué)的人滾蛋

簡述 React 任意組件之間如何通信仗阅。

  1. 如果只是父子級關(guān)系国夜,父級可以將一個回調(diào)函數(shù)當(dāng)作屬性傳遞給子級,子級可以直接調(diào)用函數(shù)從而和父級通信车吹。
  2. 使用eventHub觀察訂閱模式:就是建立一個管家,然后需要操作就通知管家,管家操作完后發(fā)給App,App再逐一發(fā)給下面的人
  3. 使用redux組件通過dispatch發(fā)出action,store根據(jù)action的type屬性調(diào)用對應(yīng)的reducer并傳入state和這個action朝卒,reducer對state進行處理并返回一個新的state放入store乐埠,connect監(jiān)聽到store發(fā)生變化,調(diào)用setState更新組件瑞眼,此時組件的props也就跟著變化棵逊。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末辆影,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子蛙讥,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,080評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件经备,死亡現(xiàn)場離奇詭異部默,居然都是意外死亡,警方通過查閱死者的電腦和手機傅蹂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,422評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來氓轰,“玉大人浸卦,你說我怎么就攤上這事∠尴樱” “怎么了?”我有些...
    開封第一講書人閱讀 157,630評論 0 348
  • 文/不壞的土叔 我叫張陵炉抒,是天一觀的道長稚叹。 經(jīng)常有香客問我,道長蛤奥,這世上最難降的妖魔是什么僚稿? 我笑而不...
    開封第一講書人閱讀 56,554評論 1 284
  • 正文 為了忘掉前任蚀同,我火速辦了婚禮,結(jié)果婚禮上蠢络,老公的妹妹穿的比我還像新娘。我一直安慰自己啡省,他們只是感情好屹耐,可當(dāng)我...
    茶點故事閱讀 65,662評論 6 386
  • 文/花漫 我一把揭開白布咆畏。 她就那樣靜靜地躺著钮糖,像睡著了一般辱士。 火紅的嫁衣襯著肌膚如雪徐鹤。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,856評論 1 290
  • 那天遂庄,我揣著相機與錄音救赐,去河邊找鬼。 笑死泌绣,一個胖子當(dāng)著我的面吹牛预厌,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播轧叽,決...
    沈念sama閱讀 39,014評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼炭晒,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了网严?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,752評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎垢村,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體宏榕,經(jīng)...
    沈念sama閱讀 44,212評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡侵佃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,541評論 2 327
  • 正文 我和宋清朗相戀三年趣钱,在試婚紗的時候發(fā)現(xiàn)自己被綠了胚宦。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片燕垃。...
    茶點故事閱讀 38,687評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡卜壕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出轴捎,到底是詐尸還是另有隱情蚕脏,我是刑警寧澤,帶...
    沈念sama閱讀 34,347評論 4 331
  • 正文 年R本政府宣布秦驯,位于F島的核電站挣棕,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏洛心。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,973評論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望偿枕。 院中可真熱鬧,春花似錦嗤锉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,777評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽韩肝。三九已至,卻和暖如春哀峻,著一層夾襖步出監(jiān)牢的瞬間哲泊,已是汗流浹背催蝗。 一陣腳步聲響...
    開封第一講書人閱讀 32,006評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留先朦,地道東北人犬缨。 一個月前我還...
    沈念sama閱讀 46,406評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像截酷,于是被迫代替她去往敵國和親乾戏。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,576評論 2 349

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

  • 作為一個合格的開發(fā)者,不要只滿足于編寫了可以運行的代碼呐能。而要了解代碼背后的工作原理;不要只滿足于自己的程序...
    六個周閱讀 8,428評論 1 33
  • 今天來看一下react組件之間是怎么進行通訊的朗徊。react推崇的是單向數(shù)據(jù)流偎漫,自上而下進行數(shù)據(jù)的傳遞,但是由下而上...
    親親qin閱讀 6,001評論 2 12
  • 技術(shù)棧: react + redux + webpack + react-router + ES6/7/8 + i...
    黃昏少年閱讀 3,075評論 0 19
  • 說在前面 關(guān)于 react 的總結(jié)過去半年就一直碎碎念著要搞起來,各(wo)種(tai)原(lan)因(le)杯矩。心...
    陳嘻嘻啊閱讀 6,850評論 7 41
  • 鉆石九型DP8畢業(yè)論文: 第六組:翟麗紅 喜歡上了九 型 2016年始史隆,我就開始喜歡上了九型人格魂务,但感覺沒有匹...
    靈滴閱讀 567評論 0 0