React中组件之间通讯的方式

 

 

 

1、是什么

咱们将组件间通讯能够拆分为两个词：

• 组件
• 通讯

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

相比vue，React的组件更加灵活和多样，按照不一样的方式能够分红不少类型的组件

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

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

2、如何通讯

组件传递的方式有不少种，根据传送者和接收者能够分为以下：

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

父组件向子组件传递

因为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>
    );
  }
}

父组件向后代组件传递

父组件向后代组件传递数据是一件最普通的事情，就像全局数据同样

使用context提供了组件之间通信的一种方式，能够共享数据，其余数据都能读取对应的数据

经过使用React.createContext建立一个context

 const PriceContext = React.createContext('price')

context建立成功后，其下存在Provider组件用于建立数据源，Consumer组件用于接收数据，使用实例以下：

Provider组件经过value属性用于给后代组件传递数据：

<PriceContext.Provider value={100}>
</PriceContext.Provider>

　　若是想要获取Provider传递的数据，能够经过Consumer组件或者或者使用contextType属性接收，对应分别以下：

class MyClass extends React.Component {
  static contextType = PriceContext;
  render() {
    let price = this.context;
    /* 基于这个值进行渲染工做 */
  }
}

组件：Consumer

<PriceContext.Consumer>
    { /*这里是一个函数*/ }
    {
        price => <div>price：{price}</div>
    }
</PriceContext.Consumer>

 

非关系组件传递

若是组件之间关系类型比较复杂的状况，建议将数据进行一个全局资源管理，从而实现通讯，例如redux。关于redux的使用后续再详细介绍

3、总结

因为React是单向数据流，主要思想是组件不会改变接收的数据，只会监听数据的变化，当数据发生变化时它们会使用接收到的新值，而不是去修改已有的值

所以，能够看到通讯过程当中，数据的存储位置都是存放在上级位置中