React组件间通信 学习笔记

组件间的通信

父组件和子组件通信，兄弟组件之间通信

---

父组件和子组件通信

父组件获取子组件信息

• 实时通信：
  • 父组件设置一个state用于存储子组件信息，给子组件的Props传入一个回调方法，子组件状态更新时（onChange），调用回调方法设置父组件状态；
• 非实时通信：
  • this.refs.XXX.method(); 需要获取时调用子组件的方法获取即可；

子组件获取父组件信息

• 实时通信
  • 子组件的props传入父组件的某一个state
    • 可以直接使用props，获取最新的state（state更新会重新render）
    • 设置为子组件的state，当state变化时，可通过componetWillReceiveProps(nextProps)设置最新的props
• 非实时通信：
  • 子组件的props传入父组件的一个回调方法，需要获取父组件状态时直接获取

兄弟组件直接通信

• 实时通信
  • A兄弟的props传入父组件的一个回调方法，A组件在状态发生改变时，调用父组件回调函数设置父组件的state;B兄弟的props传入父组件的state，父组件state更新时，会重新render，所以B兄弟相当于拿到了A兄弟的状态
• 非实时通信：
  • B兄弟通过父组件传入props的方法回调A兄弟这个refs中的方法，获取A兄弟的state