react 组件通讯的几种方式

最近在做react项目,所以简单的学习了一下组件之间的通信方式.总结来说可分为三大类:

1. 父子通讯-父组件传递信息给子组件
2. 子父通信-子组件传递信息给父组件
3. 兄弟通信-兄弟组件相互通讯

父子通讯

这是最简单的一种通讯方式,在父组件调用子组件的地方添加相应的属性传递,然后在子组件中通过 props 接收传递的参数信息
如下:

// 父组件
class Parent extends React.Component {
  state = {
    name: this.props.name,
    age: this.props.age
  }
  render() {
    return (
      <div style={{backgroundColor:'blue',height:'200px'}}>
        我是父组件盒子
        <Child name={this.state.name} age={this.state.age}/>
      </div>
    )
  }
}

// 子组件
const Child = (props) => {
  return <div style={{backgroundColor:'skyblue'}}>
    我是子组件盒子
    <span>姓名：{props.name}</span><br/>
    <span>年龄：{props.age}</span>
  </div>
}
ReactDOM.render(<Parent name='李四' age={19}/>, document.getElementById('root'))

子父通讯

这类通讯相比父子通讯要繁琐一些,具体步骤如下:

1. 在父组件提供回调函数
2. 在父组件中将回调函数做为参数传递给子组件
3. 子组件通过 this.props 并通过参数调用父组件提供的回调函数
4. 父组件顺利接收到子组件传递过来的数据

以下是简单代码实现:

// 父组件
class Parent extends React.Component {
  // 提供回调函数，用于接收子组件传递过来的数据
  state = {
    name: ''
  }
	getChildMsg = data => {
		console.log('子组件传递过来的信息是： '+ data)
		this.setState({ name: data })
	}
	render() {
		return (
			<div style={{ backgroundColor: 'skyblue', height: '200px' }}>
				我是父组件盒子<br />
				<span>姓名：{this.state.name}</span>
				<br />
				<span>年龄：</span>
				<Child getMsg={this.getChildMsg} />
			</div>
		)
	}
}

// 子组件
class Child extends React.Component {
	state = {
		name: 'yiyi',
	}
	handleClick = () => {
    this.props.getMsg(this.state.name)
	}
	render() {
		return (
			<div style={{ backgroundColor: 'pink' }}>
				我是子组件盒子
				<input type="button" value="点我给父组件传递信息" onClick={this.handleClick}/>
			</div>
		)
	}
}
ReactDOM.render(<Parent />, document.getElementById('root'))

兄弟组件

这个方式的通讯比上面两种都稍微复杂一些,具体思路就是** 状态提升**
将共享状态提升到公共父组件中,由父组件负责管理这个状态
公共父组件职责:

1. 提供共享状态
2. 提供操作共享状态的方法

下面是我实现的简单代码:

/*
  兄弟组件通信
    共享的状态提升到父组件中
    父组件中还需要提供更新状态的方法
*/

// 父组件
class Counter extends React.Component {
  // 提供共享状态
  state = {
    count: 0
  }
  // 提供修改状态的方法
  handleAdd = () => {
    this.setState({count: this.state.count + 1})
  }
  render() {
    return (
      <div>
        <Child1 count={this.state.count}/>
        <Child2 add={this.handleAdd}/>
      </div>
    )
  }
}

// 子组件1
const Child1 = (props) => {
  return <h1>计数器:{props.count}</h1>
}
// 子组件2
const Child2 = (props) => {
  // 调用父组件的加一方法
  return <button onClick={() => props.add()}>点我加一</button>
}

好了,以上就是看完组件通讯的总结~~欢迎大神们指正