組件間通信

父子組件間通信

這種情況下很簡(jiǎn)單，就是通過(guò) props 屬性傳遞，在父組件給子組件設(shè)置 props，然后子組件就可以通過(guò) props 訪問(wèn)到父組件的數(shù)據(jù)／方法，這樣就搭建起了父子組件間通信的橋梁。

import React, { Component } from 'react';
import { render } from 'react-dom';

class GroceryList extends Component {
  handleClick(i) {
    console.log('You clicked: ' + this.props.items[i]);
  }

  render() {
    return (
      <div>
        {this.props.items.map((item, i) => {
          return (
            <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
          );
        })}
      </div>
    );
  }
}

render(
  <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode
);

div 可以看作一個(gè)子組件，指定它的 onClick 事件調(diào)用父組件的方法。

父組件訪問(wèn)子組件？用 refs

非父子組件間的通信

使用全局事件 Pub/Sub 模式，在 componentDidMount 里面訂閱事件，在 componentWillUnmount 里面取消訂閱，當(dāng)收到事件觸發(fā)的時(shí)候調(diào)用 setState 更新 UI。

這種模式在復(fù)雜的系統(tǒng)里面可能會(huì)變得難以維護(hù)，所以看個(gè)人權(quán)衡是否將組件封裝到大的組件，甚至整個(gè)頁(yè)面或者應(yīng)用就封裝到一個(gè)組件。

一般來(lái)說(shuō)，對(duì)于比較復(fù)雜的應(yīng)用，推薦使用類似 Flux 這種單項(xiàng)數(shù)據(jù)流架構(gòu)，參見(jiàn)Data Flow。