React中组件之间如何通信？

一、是什么

我们将组件间通信可以拆分为两个词：

组件
通信

回顾Vue系列的文章，组件是vue中最强大的功能之一，同样组件化是React的核心思想

相比vue，React的组件更加灵活和多样，按照不同的方式可以分成很多类型的组件

而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的，广义上，任何信息的交通都是通信

组件间通信即指组件通过某种方式来传递信息以达到某个目的

二、如何通信

组件传递的方式有很多种，根据传送者和接收者可以分为如下：

父组件向子组件传递
子组件向父组件传递
兄弟组件之间的通信
父组件向后代组件传递
非关系组件传递

父组件向子组件传递

由于React的数据流动为单向的，父组件向子组件传递是最常见的方式

父组件在调用子组件的时候，只需要在子组件标签内传递参数，子组件通过props属性就能接收父组件传递过来的参数

function EmailInput(props) {
return (
    <label>
      Email: <input value={props.email} />
    </label>
);
}

const element = <EmailInput email="123124132@163.com" />;

子组件向父组件传递

子组件向父组件通信的基本思路是，父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值

父组件对应代码如下：

class Parents extends Component {
constructor() {
    super();
    this.state = {
      price: 0
    };
}

getItemPrice(e) {
    this.setState({
      price: e
    });
}

render() {
    return (
      <div>
        <div>price: {this.state.price}</div>
        {/* 向子组件中传入一个函数 */}
        <Child getPrice={this.getItemPrice.bind(this)} />
      </div>
    );
}
}

子组件对应代码如下：

class Child extends Component {
clickGoods(e) {
    // 在此函数中传入值
    this.props.getPrice(e);
}

render() {
    return (
      <div>
        <button onClick={this.clickGoods.bind(this, 100)}>goods1</button>
        <button onClick={this.clickGoods.bind(this, 1000)}>goods2</button>
      </div>
    );
}
}

兄弟组件之间的通信

如果是兄弟组件之间的传递，则父组件作为中间层来实现数据的互通，通过使用父组件传递

class Parent extends React.Component {
constructor(props) {
    super(props)
    this.state = {count: 0}
}
setCount = () => {
    this.setState({count: this.state.count + 1})
}
render() {
    return (
      <div>
        <SiblingA
          count={this.state.count}
        />
        <SiblingB
          onClick={this.setCount}
        />
      </div>
    );
}
}