# 前言
上一章节我们一起学习了通过SDK的设计，了解了 SDK 设计中的事件监听模型，同样 EventEmitter 也可以作为中介者模型来实现组件之间的跨级通信。
本章节我们就一起来学习几种通用的组件通信模型， 同时通过中介者模型实现组件元素之间跨级通信。
# 开箱即用的源码
# 组件通信模式
本小节以 React 组件框架为例，和大家一起探讨学习几种通用的组件通信模型。
- 父组件到子组件：
props属性 ，instance methods实例方法 - 子组件到父组件：
callback回调方法，event bubbles事件冒泡 - 临近兄弟节点：
Parent Component父组件 - 任何节点：
Observer Pattern观察者模式,Global Variables全局变量,ContextReact执行上下文
# 父组件到子组件
# Props
Props 是一个父节点到一个子节点通信最常见的方式。
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
ReactDOM.render(
<Welcome name="Sara" />,
document.getElementById('root')
);
@前端进阶之旅: 代码已经复制到剪贴板
# Instance Methods
父组件可以使用refs调用子组件上的实例方法
class TheChild extends React.Component {
myFunc() {
return "hello";
}
}
class TheParent extends React.Component {
render() {
return (
<TheChild
ref={foo => {
this.foo = foo;
}}
/>
);
}
componentDidMount() {
var x = this.foo.myFunc();
// x is now 'hello'
}
}
@前端进阶之旅: 代码已经复制到剪贴板
# 子组件到父组件
# Callback Functions
最简单的方法是父组件将函数传递给子组件，子组件调用父组件的方法
以属性的方式传递函数
<MyChild myFunc={this.handleChildFunc} />
@前端进阶之旅: 代码已经复制到剪贴板
子组件调用方式
this.props.myFunc();
