react native 中 父组件与子组件之间的消息传递

• 初始化阶段
  • 父组件传值给子组件
• 用户交互阶段
  • 子组件传值给父组件
  • 父组件传值给子组件
    • 通过 ref 传值给特定子组件
    • 通过 setState 重绘所有子组件，来传值给所有子组件

初始化阶段

父组件可以通过子组件的属性 this.props 向 子组件传值，如下所示，Parent 通过 Son 的 data 属性，将 dataFromParent 值传递给了 Son 组件

class Parent extends Component {
	 render(){
        return (
            <Son data={dataFromParent}/>
        );
    }
}

Son 组件通过 this.props.data 即可拿到从父组件传过来的值。

class Son extends Component {
	constructor(props) {
		super(props)
		this.props.data
	}
}

用户交互阶段

用户交互阶段 - 子组件传值给父组件

子组件可以通过调用来自父组件的回调方法，来传值给父组件。如下所示，Parent 在初始化阶段先向 Son 传递回调方法 _cbOnParent(data)，当 Son 调用 this.props.callback 方法的时候，就回调到了父组件的 _cbOnParent 方法，实现了传值。

class Parent extends Component {

	_cbOnParent(dataFromSon) {
	
	}
	
	 render(){
        return (
            <Son data={dataFromParent} callback={(dataFromSon) => this._cbOnParent(dataFromSon)}/>
        );
    }
}

class Son extends Component {
	constructor(props) {
		super(props)
		this.props.data
	}
	
	onUserClick(dataFromSon) {
		this.props.callback(dataFromSon)
	}
}

用户交互阶段 - 父组件传值给子组件

在用户交互阶段，父组件可以通过 ref 来传值给子组件。如下所示，在定义子组件时，声明一个 ref 引用，然后父组件就可以通过 this.refs 来获取到该子组件的实例，进而可以通过调用子组件的方法来实现传值操作。

class Parent extends Component {

	_cbOnParent(dataFromSon) {
	}

	_sendDataToSon(data) {
		// 调用子组件方法，实现传值
		this.refs.Son.methodOfSon(data)
	}
	
	 render(){
        return (
            <Son ref="Son" data={dataFromParent} callback={(dataFromSon) => this._cbOnParent(dataFromSon)}/>
        );
    }
}

class Son extends Component {
	constructor(props) {
		super(props)
		this.props.data
	}
	
	methodOfSon(data) {
		// 得到来自 父组件的值：data
	}
	
	onUserClick(dataFromSon) {
		this.props.callback(dataFromSon)
	}
}

用户交互阶段 - 通过 setState 重绘所有子组件，来传值给所有子组件

在父组件中，执行 this.setState({})，重绘所有子组件，这时如果传给某个子组件的属性值有变化，那个子组件便会在 componentWillReceiveProps(nextProps) 方法中收到新的值，如下所示

class Parent extends Component {
	 render(){
        return (
        	// 当 Parent 执行 setState 方法，改变了 dataFromParent 的值时
        	// 会执行到 Son 的 componentWillReceiveProps(nextProps) 方法，
        	// Son 可以通过 nextProps.data 获取到新的值
            <Son data={this.state.dataFromParent}/>
        );
    }
}

class Son extends Component {
	constructor(props) {
		super(props)
	}
	componentWillReceiveProps(nextProps) {
		// nextProps.data 获取到新的 dataFromParent，
		// 可以通过调用 setState 方法刷新 Son 组件的界面
	}