React-native 组件间传值

在react-native中每个页面我们都会抽取一些小的组件，以便于维护和复用，那么组件间就免不了相互的数据传递，今天就记录下关于组件间消息传递的几种方法

父子组件间传值

由于是父子组件那么在父组件中可以很轻松的获取到子组件的实例。数据间传递还是很方便的。
在react-native中 不需要想我们在写iOS一样，需要先在子类中定义好属性，在传值 。在react-native中每个组件都有一个props属性。我们可以先设置属性数据，那么设置的这个属性数据，会自动保存在props中。

• 我们先创建一个子组件

// 创建一个子组件
class  Son extends  Component {

    render(){
        return(
            
            
                我的名字叫{this.props.name}
            
        )
    }
}

• 创建一个父组件 在父组件中包含子组件

class  Father extends  Component {

    render(){
        return(
            
            
                
            
        )
    }

}

现在Son子组件已经可以获取到从父组件中传递的数据了，是不是 还挺简单的。那如果我们想从Son组件传递数据给Father应该怎么做呢

子组件传值给父组件（数据逆传）

我们想在父组件中获取到子组件传递过来的数据。首先我们也是通过props来传参，但是这次我们传递的不是数据，而是类似于block的函数作为参数传递给子组件。

• 首先我们先在父控件中定义好一个函数

    // 实现方法接受子控件传达的值
    getMoney(money) {
        // 获取传过来的值,并赋值给自己的属性,刷新UI
        // 获取之前的
        var  oldMoney = this.state.money
        oldMoney += money

        // 重新赋值
        this.setState({
            money: oldMoney
        })

    }

• 现在我们将定义好的函数赋值给子组件的属性。

    render(){
        return(
            
                
                收到孩子的钱 + {this.state.money}
            
        )
    }

注： this.getMoney.bind(this) 这里使用bind来指定this的指向关系，因为我们在getMoney这个方法中需要使用到 this 如果不做绑定的话，this的指向关系有可能不对（this可以理解为iOS里的self）

• 在子组件中获取属性，并调用。

class  Son extends  Component {

    // 逆向传值
    // 定义方法
    sendMoney(){
        // 获取props中报存的方法 并调用
        this.props.money(100)
    }

    render(){
        return(
            

                {this.props.name}的孩子
                给爹发钱
            
        )
    }
}

至此在父控件中就可以收到子控件传递过来的100数据了。

---

在开发中不仅仅有父子之间的数据传递，有时候也会涉及到，两个组件没有存在直接引用关系时的数据传递。在iOS开发中我们一般会选用NSNotification来处理这方面的逻辑。在react-native中也提供了类似的API组件 也就是DeviceEventEmitter 它是包含在react-native库中的，使用起来也比较方便，和iOS的通知类似。

// 1 要使用DeviceEventEmitter 首先要导入
import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    DeviceEventEmitter
}

    from 'react-native'

    // 2 在需要传值的组件里，发送通知即可
    // sendMoney 通知名称
    // 100 传递的值
    DeviceEventEmitter.emit('sendMoney',100)

  // 3 在需要获取值的组件里 监听通知
  // 'sendMoney' 通知名称
  //  this.getMoney.bind(this) 收到通知后 调用的方法
 DeviceEventEmitter.addListener('sendMoney',this.getMoney.bind(this)) 实现方法

关于props和State

这里说下我对props和state的理解；

首先props和state有一个共同点 就是他们都保存组件的属性。

不同点是：

• 从父组件中传递过来的属性数据都保存在props中，并且props中的数据 只能在父控件中修改。修改props也不会触发重新渲染。
• 而state是定义在组件内部，并且只有state发生改变时（也就是调用setState）才会重新渲染页面

或者更简单的理解为，外部传递过来的数据都保存在props中，而组件内部创建的数据都保存在state中。