React組件間通訊

React是以組合組件的形式組織的，組件所以彼此相互獨立。組件中會有3種不一樣的可能性：父組件向子組件通訊、子組件向父組件通訊、沒有嵌套關係的組件之間通訊。

父組件向子組件通訊

React數據流是單向的，父組件經過props向子組件傳遞須要的信息。

子組件向父組件通訊

在React以前的組件開發模式時，經常須要接受組件運行時的狀態，咱們能夠經過利用回調函數和利用自定義事件機制接受到組件的狀態。

跨級組件通訊

在React中子組件跨級訪問時，咱們能夠經過層層傳遞的方法，可是這樣代碼不優雅並且當代碼多的狀況下有些冗餘。這時咱們能夠經過context實現跨級父子組件間的通訊。

class ListItem extends Component {
    static contextType = {
        color: PropTypes.string
    }
    
    render() {
        const {value} =  this.props
        
        return (
            <li style={{background: this.context.color}}>
            </li>
        )
    }
}


class List extends Component {
    static childContextTypes = {
        color: PropTypes.string
    }
    
    getChildContext() {
        return {
            color: 'red'
        }
    }
    
    render() {
        const { list } = this.props;
        return (
               <div>
                <ListTitle title={title} /> <ul>
                {list.map((entry, index) => (
                <ListItem key={`list-${index}`} value={entry.text} />
                ))} </ul>
               </div>
        )
    }
    
}

如上，咱們沒有給ListItem傳遞props，而是在父組件中定義了ChildContext，這樣從這一層開始的子組件均可以拿到定義的context。例如color

context就像一個全局變量，咱們不推薦使用context，使用 context 比較的是義上的不會，如界面主題、用戶信息等。

沒有嵌套關係的組件通訊

沒有嵌套關係的組件，咱們只能經過能夠影響全局的一些機制去考慮，自定義事件不失爲一種好的辦法。

咱們能夠使用發佈/訂閱模式，能夠借用Node.js Events模塊瀏覽器版實現。

import { EventEmitter } from 'events'
export default new EventEmitter()

而後將該實例輸出到各個組件中

import emmiter from './events'