18.组件通讯的三种方式

组件之间的通讯分为 3 种

1.父组件 -> 子组件

2.子组件 -> 父组件

3.兄弟组件

• 18.组件通讯的三种方式
  • 1.父组件传递数据给子组件
  • 2.子组件传递数据给父组件
  • 3.兄弟组件
  • 4.方式二: 使用消息订阅(subscribe)-发布(publish)机制

1.父组件传递数据给子组件

1.父组件提供要传递的state数据

2.给子组件标签添加属性, 值为state中的数据

3.子组件中通过 props 接收父组件中传递的数据

2.子组件传递数据给父组件

思路: 利用回调函数, 父组件提供回调, 子组件调用, 将要传递的数据作为回调函数的参数

1.父组件提供一个回调函数 (用于接收数据)

2.将该函数作为属性的值, 传递给子组件

3.子组件通过 props 调用回调函数

4.将子组件的数据作为参数传递给回调函数

3.兄弟组件

• 将共享状态提升到最近的公共父组件中, 由公共组件管理这个状态
• 思想: 状态提升
• 公共父组件职责: 1.提供共享状态 2.提供操作共享状态的方法
• 要通讯的子组件只需通过 props 接收状态或操作状态的方法

// 父组件
class Sibling extends React.Component {
  // 提供状态
  state = {
    count: 0
  }

  // 提供修改状态的方法
  onIncrement = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return (
      <div>
        <Child1 count={this.state.count}/>
        <Child2 onIncrement={this.onIncrement}/>
      </div>
    )
  }
}

// 子组件
const Child1 = (props) => {
  return <h1>计数器: {props.count} </h1>
}

// 子组件
const Child2 = (props) => {
  function handleClick () {
    props.onIncrement()
  }
  return <button onClick={handleClick}>+1</button>
}

4.方式二: 使用消息订阅(subscribe)-发布(publish)机制

• 应用于兄弟组件, 父子组件(多层嵌套数据传递)

• 1)      工具库:PubSubJS

• 2)      下载: npm install pubsub-js --save

• 3)      使用:

import PubSub from 'pubsub-js' // 需要在两个组件都引入

// 发布消息 (search)
PubSub.publish('search',serachName)


componentDidMount() {
    // 订阅消息(search)   
    PubSub.subscribe('search', (msg, searchName) => {   // 使用箭头函数  msg是固定的, 第二个才是参数
      ....
    })
}