react系列--組件通信

index

react系列--組件通信 __veblen

在項(xiàng)目開發(fā)過程中枉证,為了降低耦合度矮男,我們會采用組件開發(fā)模式,這就衍生出來各組件之間的通信室谚。

組件通信大致分為三種形式:

  • 父=====>子
  • 子=====>父
  • 兄弟之間

更復(fù)雜的通信方式如父=====>孫毡鉴,則建議使用redux,詳見react系列--redux


1.父子組件通信(父===>子)

說到組件通信秒赤,先來介紹下單向數(shù)據(jù)流:

React是單向數(shù)據(jù)流猪瞬,數(shù)據(jù)主要從父節(jié)點(diǎn)傳遞到子節(jié)點(diǎn)(通過props)。 如果頂層(父級)的某個props改變了入篮,React會重渲染所有的子節(jié)點(diǎn)陈瘦。

Props: props是property的縮寫,可以理解為HTML標(biāo)簽的attribute潮售。 不可以使用this.props直接修改props痊项,因?yàn)閜rops是只讀的,props是用于整個組件樹中傳遞數(shù)據(jù)和配置酥诽。在當(dāng)前組件訪問props线婚,使用this.props。

接下來說說state

每個組件都有屬于自己的state盆均,state和props的區(qū)別在于前者(state)只存在于組件內(nèi)部塞弊,只能從當(dāng)前組件調(diào)用this.setState修改state值(不可以直接修改this.state!)。 一般我們更新子組件都是通過改變state值游沿,更新子組件的props值從而達(dá)到更新饰抒。

父組件更新組件狀態(tài) -----props-----> 子組件更新

  • 靜態(tài)數(shù)據(jù)傳遞
var Parent = React.createClass({  
         render: function() {  
                  return <div>teacher's name is: <Child name="veb"></Child></div>;  
         }  
});  
var Child = React.createClass({  
         render: function() {  
                  return <span>{this.props.name}</span>;  
         }  
});  

React.render(  
        <Parent />,  
        document.getElementById('app')  
);

  • 動態(tài)數(shù)據(jù)傳遞
var Parent = React.createClass({  
          getInitialState: function() {  
                  return {  
                        name: "veb"  
                  }  
          },  
         change:function(){
                  this.setState({name:"len"})
         },
         render: function() {  
                  return <div>
                              teacher's name is: <Child name={this.state.name}></Child>
                              <button onClick="{this.change}" ></button>
                    </div>;  
         }  
});  
var Child = React.createClass({  
         render: function() {  
                  return <span>{this.props.name}</span>;  
         }  
});  

React.render(  
        <Parent />,  
        document.getElementById('app')  
);

Child組件接收父組件state.name,當(dāng)點(diǎn)擊button的時候通過setState更改state.name的值為len诀黍,Child視圖對應(yīng)更新


2.父子組件通信(子===>父)

子組件更新父組件狀態(tài) -----需要父組件傳遞回調(diào)函數(shù)-----> 子組件調(diào)用觸發(fā)

  • 修改上述代碼如下
var Parent = React.createClass({  
          getInitialState: function() {  
                  return {  
                        name: "veb"  
                  }  
          },  
         change:function(){
                  this.setState({name:"len"})
         },
         render: function() {  
                  return <div>
                              teacher's name is:{this.state.name}
                             <Child ev={this.change}></Child>
                    </div>;  
         }  
});  

var Child = React.createClass({  
         render: function() {  
                  return <button onClick={this.props.ev} ></button>;  
         }  
});  

React.render(  
        <Parent />,  
        document.getElementById('app')  
);

當(dāng)點(diǎn)擊子組件時袋坑,觸發(fā)從父組件傳遞過來的回調(diào)函數(shù)。

  • 如果需要往父組件傳參怎么辦眯勾?修改以上代碼如下
var Parent = React.createClass({  
          getInitialState: function() {  
                  return {  
                        name: "veb"  
                  }  
          },  
         change:function(name){
                  this.setState({name:name})
         },
         render: function() {  
                  return <div>
                              teacher's name is:{this.state.name}
                             <Child ev={this.change}></Child>
                    </div>;  
         }  
});  
var Child = React.createClass({  
         toParent:function(name){
                this.props.ev(name)
         },
         render: function() {  
                  return <button onClick={this.toParent.bind(this,"veblen')}></button>; 
         }  
});  

React.render(  
        <Parent />,  
        document.getElementById('app')  
);

這樣枣宫,父組件就可以接收到子組件傳遞過來的參數(shù)了


兄弟組件

方式一:

按照React單向數(shù)據(jù)流方式,我們需要借助父組件進(jìn)行傳遞吃环,通過父組件回調(diào)函數(shù)改變兄弟組件的props也颤。其實(shí)這種實(shí)現(xiàn)方式與子組件更新父組件狀態(tài)的方式是大同小異的。

方式二:

猛擊here

以上就是react組件通信的講解郁轻。如果看懂了翅娶,說明你聰明;看不懂好唯,說明我講的不好竭沫。加油,同學(xué)們骑篙!未來是屬于你們的

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蜕提,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子靶端,更是在濱河造成了極大的恐慌贯溅,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件躲查,死亡現(xiàn)場離奇詭異它浅,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)镣煮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門姐霍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人典唇,你說我怎么就攤上這事镊折。” “怎么了介衔?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵恨胚,是天一觀的道長。 經(jīng)常有香客問我炎咖,道長赃泡,這世上最難降的妖魔是什么寒波? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮升熊,結(jié)果婚禮上俄烁,老公的妹妹穿的比我還像新娘。我一直安慰自己级野,他們只是感情好聊疲,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布狮辽。 她就那樣靜靜地躺著收毫,像睡著了一般闸昨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上况鸣,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天牢贸,我揣著相機(jī)與錄音,去河邊找鬼懒闷。 笑死,一個胖子當(dāng)著我的面吹牛栈幸,可吹牛的內(nèi)容都是我干的愤估。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼速址,長吁一口氣:“原來是場噩夢啊……” “哼玩焰!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起芍锚,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤昔园,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后并炮,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體默刚,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年逃魄,在試婚紗的時候發(fā)現(xiàn)自己被綠了荤西。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡伍俘,死狀恐怖邪锌,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情癌瘾,我是刑警寧澤觅丰,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站妨退,受9級特大地震影響妇萄,放射性物質(zhì)發(fā)生泄漏蜕企。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一嚣伐、第九天 我趴在偏房一處隱蔽的房頂上張望糖赔。 院中可真熱鬧,春花似錦轩端、人聲如沸放典。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽奋构。三九已至,卻和暖如春拱层,著一層夾襖步出監(jiān)牢的瞬間弥臼,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工根灯, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留径缅,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓烙肺,卻偏偏與公主長得像纳猪,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子桃笙,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評論 2 361

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

  • 在項(xiàng)目開發(fā)過程中氏堤,為了降低耦合度,我們會采用組件開發(fā)模式搏明,這就衍生出來各組件之間的通信鼠锈。 組件通信大致分為三種形式...
    Veb閱讀 783評論 0 8
  • 說在前面 關(guān)于 react 的總結(jié)過去半年就一直碎碎念著要搞起來,各(wo)種(tai)原(lan)因(le)星著。心...
    陳嘻嘻啊閱讀 6,879評論 7 41
  • 技術(shù)棧: react + redux + webpack + react-router + ES6/7/8 + i...
    黃昏少年閱讀 3,079評論 0 19
  • 做React需要會什么虚循? react的功能其實(shí)很單一由桌,主要負(fù)責(zé)渲染的功能,現(xiàn)有的框架邮丰,比如angular是一個大而...
    蒼都閱讀 14,769評論 1 139
  • 蜀南竹海 從陛下的口中得知行您,離自貢不遠(yuǎn)處有一風(fēng)景區(qū),叫蜀南竹海剪廉。說是那里一年四季滿山都長著翠綠的竹子娃循。也許是生長在...
    小小的葉閱讀 960評論 0 2