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是單向數據流，主要思想是組件不會改變接收的數據，只會監聽數據的變化，當數據發生變化時它們會使用接收到的新值，而不是去修改已有的值

所以，能夠看到通訊過程當中，數據的存儲位置都是存放在上級位置中