在
react-native中每個頁面我們都會抽取一些小的組件进肯，以便于維護和復用吕嘀，那么組件間就免不了相互的數(shù)據(jù)傳遞法褥，今天就記錄下關于組件間消息傳遞的幾種方法
父子組件間傳值
由于是父子組件那么在父組件中可以很輕松的獲取到子組件的實例历葛。數(shù)據(jù)間傳遞還是很方便的坞淮。
在react-native中 不需要想我們在寫iOS一樣墨微，需要先在子類中定義好屬性道媚，在傳值 。在react-native中每個組件都有一個props屬性翘县。我們可以先設置屬性數(shù)據(jù)最域，那么設置的這個屬性數(shù)據(jù)，會自動保存在props中锈麸。
- 我們先創(chuàng)建一個子組件
// 創(chuàng)建一個子組件
class Son extends Component {
render(){
return(
<View style={styles.sonStyle}>
<!-- 獲取父組件中傳遞過來的數(shù)據(jù) 并顯示 -->
<Text>我的名字叫{this.props.name}</Text>
</View>
)
}
}
- 創(chuàng)建一個父組件 在父組件中包含子組件
class Father extends Component {
render(){
return(
<View style={styles.fatherStyle}>
<!--添加子組件 并創(chuàng)建一個name屬性 并賦值給Son組件 -->
<Son name= '小莊' ></Son>
</View>
)
}
}
現(xiàn)在Son子組件已經(jīng)可以獲取到從父組件中傳遞的數(shù)據(jù)了镀脂，是不是 還挺簡單的。那如果我們想從Son組件傳遞數(shù)據(jù)給Father應該怎么做呢
子組件傳值給父組件（數(shù)據(jù)逆?zhèn)鳎?/h4>
我們想在父組件中獲取到子組件傳遞過來的數(shù)據(jù)忘伞。首先我們也是通過props來傳參薄翅，但是這次我們傳遞的不是數(shù)據(jù)沙兰，而是類似于block的函數(shù)作為參數(shù)傳遞給子組件。
- 首先我們先在父控件中定義好一個函數(shù)
// 實現(xiàn)方法接受子控件傳達的值
getMoney(money) {
// 獲取傳過來的值,并賦值給自己的屬性,刷新UI
// 獲取之前的
var oldMoney = this.state.money
oldMoney += money
// 重新賦值
this.setState({
money: oldMoney
})
}
- 現(xiàn)在我們將定義好的函數(shù)賦值給子組件的屬性翘魄。
render(){
return(
<View style={styles.fatherStyle}>
<Son name= '小莊' money={this.getMoney.bind(this)}></Son>
<Text>收到孩子的錢 + {this.state.money}</Text>
</View>
)
}
注： this.getMoney.bind(this) 這里使用
bind來指定this的指向關系鼎天，因為我們在getMoney這個方法中需要使用到this如果不做綁定的話，this的指向關系有可能不對（this可以理解為iOS里的self）
- 在子組件中獲取屬性熟丸，并調用训措。
class Son extends Component {
// 逆向傳值
// 定義方法
sendMoney(){
// 獲取props中報存的方法 并調用
this.props.money(100)
}
render(){
return(
<View style={styles.sonStyle}>
<Text>{this.props.name}的孩子</Text>
<Text onPress={this.sendMoney.bind(this)}>給爹發(fā)錢</Text>
</View>
)
}
}
至此在父控件中就可以收到子控件傳遞過來的100數(shù)據(jù)了。
在開發(fā)中不僅僅有父子之間的數(shù)據(jù)傳遞光羞，有時候也會涉及到绩鸣，兩個組件沒有存在直接引用關系時的數(shù)據(jù)傳遞。在iOS開發(fā)中我們一般會選用NSNotification來處理這方面的邏輯纱兑。在react-native中也提供了類似的API組件 也就是DeviceEventEmitter 它是包含在react-native庫中的呀闻，使用起來也比較方便，和iOS的通知類似潜慎。
// 1 要使用DeviceEventEmitter 首先要導入
import
{
AppRegistry,
StyleSheet,
Text,
View,
DeviceEventEmitter
}
from 'react-native'
// 2 在需要傳值的組件里捡多，發(fā)送通知即可
// sendMoney 通知名稱
// 100 傳遞的值
DeviceEventEmitter.emit('sendMoney',100)
// 3 在需要獲取值的組件里 監(jiān)聽通知
// 'sendMoney' 通知名稱
// this.getMoney.bind(this) 收到通知后 調用的方法
DeviceEventEmitter.addListener('sendMoney',this.getMoney.bind(this)) 實現(xiàn)方法
關于props和State
這里說下我對props和state的理解；
首先props和state有一個共同點 就是他們都保存組件的屬性铐炫。
不同點是：
- 從父組件中傳遞過來的屬性數(shù)據(jù)都保存在
props中垒手，并且props中的數(shù)據(jù) 只能在父控件中修改。修改props也不會觸發(fā)重新渲染倒信。 - 而
state是定義在組件內部科贬，并且只有state發(fā)生改變時（也就是調用setState）才會重新渲染頁面
或者更簡單的理解為，外部傳遞過來的數(shù)據(jù)都保存在props中鳖悠，而組件內部創(chuàng)建的數(shù)據(jù)都保存在state中榜掌。
