30分鐘精通十種React組件之間通訊的方法

這兩天被臨時抽調到別的項目組去作一個小項目的迭代。這個項目前端是用React，只是個小型項目因此並無使用Redux等狀態管理的庫。恰好遇到了一個小問題：兩個不太相關的組件到底該怎麼進行通訊。我以爲這個問題還挺有趣的，因此把個人思考過程寫下來，你們也能夠一塊兒討論討論。

雖然重點是要講兩個不相關的組件間的通訊，但我仍是從最多見的父子組件通訊講起，你們就當溫故而知新了。先把完整的總結列出來，而後再詳細展開。

組件間通訊方式總結

• 父組件 => 子組件：

  1. Props
  2. Instance Methods

• 子組件 => 父組件：

  1. Callback Functions
  2. Event Bubbling

• 兄弟組件之間：

  1. Parent Component

• 不太相關的組件之間：

  1. Context
  2. Portals
  3. Global Variables
  4. Event Bus
  5. Redux/Flux

1. Props

這是最多見的react組件之間傳遞信息的方法了吧，父組件經過props把數據傳給子組件，子組件經過this.props去使用相應的數據

const Child = ({ name }) => {
    <div>{name}</div>
}

class Parent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'zach'
        }
    }
    render() {
        return (
            <Child name={this.state.name} />
        )
    }
}

2. Instance Methods

第二種父組件向子組件傳遞信息的方式有些同窗可能會比較陌生，但這種方式很是有用，請務必掌握。原理就是：父組件能夠經過使用refs來直接調用子組件實例的方法，看下面的例子：

class Child extends React.Component {
  myFunc() {
    return "hello"
  }
}

class Parent extends React.Component {
  componentDidMount() {
    var x = this.foo.myFunc()   // x is now 'hello'
  }
  render() {
    return (
      <Child
        ref={foo => {
          this.foo = foo
        }}
      />
    )
  }
}

大體的過程：

1. 首先子組件有一個方法myFunc
2. 父組件給子組件傳遞一個ref屬性，而且採用callback-refs的形式。這個callback函數接收react組件實例/原生dom元素做爲它的參數。當父組件掛載時，react會去執行這個ref回調函數，並將子組件實例做爲參數傳給回調函數，而後咱們把子組件實例賦值給this.foo。
3. 最後咱們在父組件當中就可使用this.foo來調用子組件的方法咯

瞭解了這個方法的原理後，咱們要考慮的問題就是爲啥咱們要用這種方法，它的使用場景是什麼？最多見的一種使用場景：好比子組件是一個modal彈窗組件，子組件裏有顯示/隱藏這個modal彈窗的各類方法，咱們就能夠經過使用這個方法，直接在父組件上調用子組件實例的這些方法來操控子組件的顯示/隱藏。這種方法比起你傳遞一個控制modal顯示/隱藏的props給子組件要美觀多了。

class Modal extends React.Component {
  show = () => {// do something to show the modal}
  hide = () => {// do something to hide the modal}
  render() {
    return <div>I'm a modal</div>
  }
}

class Parent extends React.Component {
  componentDidMount() {
    if(// some condition) {
        this.modal.show()
    }
  }
  render() {
    return (
      <Modal
        ref={el => {
          this.modal = el
        }}
      />
    )
  }
}

3. Callback Functions

講完了父組件給子組件傳遞信息的兩種方式，咱們再來說子組件給父組件傳遞信息的方法。回調函數這個方法也是react最多見的一種方式，子組件經過調用父組件傳來的回調函數，從而將數據傳給父組件。

const Child = ({ onClick }) => {
    <div onClick={() => onClick('zach')}>Click Me</div>
}

class Parent extends React.Component {
    handleClick = (data) => {
        console.log("Parent received value from child: " + data)
    }
    render() {
        return (
            <Child onClick={this.handleClick} />
        )
    }
}

4. Event Bubbling

這種方法其實跟react自己沒有關係，咱們利用的是原生dom元素的事件冒泡機制。

class Parent extends React.Component {
  render() {
    return (
      <div onClick={this.handleClick}>
         <Child />
      </div>
    );
  }
  handleClick = () => {
    console.log('clicked')
  }
}
function Child {
  return (
    <button>Click</button>
  );    
}

巧妙的利用下事件冒泡機制，咱們就能夠很方便的在父組件的元素上接收到來自子組件元素的點擊事件

5. Parent Component

6. Context

7. Portals

8. Global Variables

9. Event Bus

10. Redux/Flux

先發佈下，明天繼續更新