## 三、组件之间的通信 > 组件之间的通信可以分为三种：父传子，子传父，同级组件互传 ### 3.1 父传子 - 父组件通过 元素属性的方式 ( key=value )向子组件传递信息 - 子组件通过this.props.key 获取传入的props ``` class Child extends Component{ render() { return (<h1>子组件获取到的props: {this.props.name}</h1>) } } class Parent extends Component{ render() { return ( <div> <Child name="Jack"/> </div> ) } } ``` ### 3.2 子传父 事件+state 1. 父组件传入子组件的prop值为父组件的状态 2. 父组件定义 事件处理函数 来响应状态变化 3. 子组件触发事件 ``` class Child extends Component{ render() { // 点击时调用changeName事件，来向父组件传达改变状态的信息 return (<div> <h1>子组件获取到的props: {this.props.name}</h1> <button onClick={() => { this.props.changeName() } }>change Name</button> </div>) } } class Parent extends Component{ constructor() { super() // 设置初始状态 this.state = { name:'Jack' } } // 传入改变自身状态的事件 changeName() { this.setState({ name:'Rose' }) } render() { return ( <div> <Child name={this.state.name} changeName={this.changeName.bind(this)}/> </div> ) } } ``` ### 3.3 同级组件之间的通信 - 以同级组件的共同父组件为中介完成通信 - 同级组件的数据统一由父组件管理，当子组件要改变时则调用父组件的事件达到改变 - 父组件 state的改变会影响其所有子组件中 属性与其state相关的值的改变 ``` class Child extends Component{ render() { return (<div> <h1>子组件获取到的props: {this.props.num}</h1> <button onClick={() => { this.props.add() } }>加1</button> </div>) } } class ChildOther extends Component{ render() { return (<div> <h1>子组件获取到的props: {this.props.num}</h1> <button onClick={() => { this.props.minum() } }>减1</button> </div>) } } class Parent extends Component{ constructor() { super() this.state = { name: 'Jack', num:1 } } add() { this.setState({ num:this.state.num+1 }) } minum() { this.setState({ num:this.state.num-1 }) } render() { return ( <div> <Child num={this.state.num} add={this.add.bind(this)}/> <ChildOther num={this.state.num} minum={this.minum.bind(this)}/> </div> ) } } ``` ### 3.4 全局事件 > 当项目比较大，组件的嵌套层次比较深时，再使用兄弟组件间的通信就会对性能造成一定程度的影响，这时就可以使用 **全局事件** 来解决这类问题 > 官网中提到可以使用全局事件来进行组件间的通信，官网推荐 **Flux**（Facebook官方出的），还有**Relay、Redux、trandux**等第三方类库。这些框架思想都一致，都是统一管理组件state变化情况，达到数据可控目的。本人使用了Redux，建议要会其中一种。对于EventEmitter或PostalJS这类的第三方库是不建议使用的，这类全局事件框架并没有统一管理组件数据变化，用多了会导致数据流不可控。 > 简单的组件交流我们可以使用上面非全局事件的简单方式，但是当项目复杂，组件间层次越来越深，上面的交流方式就不太合适（当然还是要用到的，简单的交流）。强烈建议使用Flux、Relay、Redux、trandux等类库其中一种，这些类库不只适合React，像Angular等都可以使用。