react開發教程（八）React組件通訊

父子組件通信

通信手段
這是最多見的通訊方式，父組件只須要將子組件須要的props傳給子組件，子組件直接經過this.props來使用。
通信內容
更多要提的是如何合理的設置子組件的props，要想將子組件設計成一個複用性強的通用組件，須要將可以複用的部分抽象出來，抽象出來的props有兩種造成，一種是簡單的變量，另外一種是抽象出來處理某種邏輯函數。

以Header 組件爲例

//HeaderBar.jsx  子組件

import React, { Component } from 'react';

class Header extends Component {
    constructor() {
        super();
        this.handleClick = (e) => {
            console.log(this)
        }
    }

    renderLeftComponent() {

        let leftDOM = {};
        if (this.props.renderLeftComponent) {
            return this.props.renderLeftComponent();
        }

        if (this.props.showBack) {
            let backFunc = this.props.onBack || this.goBack;
            leftDOM = (<a onClick={backFunc.bind(this)}><i className="icon left-icon icon-left-arrow"></i></a>);
        }
        return leftDOM;
    }
    

    renderRightComponent() {
        if (this.props.renderRightComponent) {
            return this.props.renderRightComponent();
        }
    }

    goBack() {
        alert("返回上一頁")
    }

    render() {
        return (
            <header className="header-bar">
                {this.renderLeftComponent()}
                <span>{this.props.title || '滴滴'}</span>
                {this.renderRightComponent()}
            </header>
        );
    }
}

export default Header;

//父親組件部分代碼App.jsx
import HeaderBar from "./components/Header";

let leftIcon = function () {
  return (
    <a><i className="icon left-icon icon-left-haha"></i>左邊按鈕</a>
  )
}
class App extends Component {

  render() {
    return (
      <div className="App">
        <HeaderBar title="滴滴打車"  renderLeftComponent={leftIcon} />
      </div>
    );
  }
}

子父組件通信

父-子組件通訊的手段是經過子組件的props是子組件用父組件的東西，子-父組件通訊，是父組件用子組件的東西，暫時瞭解的兩種方法

利用回調函數

父組件經過props傳遞一個方法給子組件，子組件經過props方法將子組件數據傳遞給父組件

利用ref

父組件經過refs調用子組件的屬性

跨級組件通訊

在React中當一個屬性反覆使用而且存在與好幾個子組件中的時候，這個時候咱們若是經過props一級一級傳遞的話能夠實現多層級訪問，可是這樣出現一個問題就是會使代碼很是混亂，在React中國年，咱們還可使用 context 來實現跨級父子組件間的通訊；
在react中context稱爲蟲洞

// Component 父級
class parentComponent extends React.Component {
    
    // add the following property
    static childContextTypes = {
        color: React.PropTypes.string
    }
    
    // 添加下面方法
    getChildContext() {
        return {
            color: "#f00"
        }
    }
    
    render() {
        <div>
            <Child1 />
        </div>
    }
}


// Component Child1
class Child1 extends React.Component {
    // 添加下面屬性
    static contextTypes = {
        color: React.PropTypes.string
    }
    
    render() {
        <div>{this.context.color}</div>
    }
}

同級組件通訊

同級組件之間的通訊仍是須要經過父組件做爲中介，利用屢次父-子組件通訊，項目中將須要傳遞的數據放在了父組件的state中，變更時能夠自動的同步傳遞。