模模糊糊又到了一年之春，萬物復甦，動物開始**的季節了?；一想到那麼好的季節，不跳槽還能幹嘛？然後本渣就走上了一條不歸路。?

面試官：說一下React有哪些通訊方式？

    此時我深呼吸一下，然後一口氣說了六種通訊方式：
    
        1.props父子通訊
        
        2.回撥函式，子父通訊
        
        3.變數提升，兄弟組建通訊
        
        4.Context,跨組建通訊
        
        5.node的events模組的單例通訊
        
        6.redux共享資料通訊
複製程式碼

面試官：“嗯嗯，挺全”

然後露出了一個邪惡的笑容，接著說了一句。

面試官：“口說無憑，能不能每一種通訊方式都給我舉個?”

我：“好吧”

其實此時...

然後我接過他的某米電腦。

1.props父子通訊

    function Children(props) {
      return (
        <div>
          <p>Children</p>
          <p>{props.text}</p>
        </div>
      )
    }
    function Parent() {
      return (
        <div>
          <p>Parent</p>
          <Children text="這是爸爸傳給你的東西"></Children>
        </div>
      )
    }
    
    export default Parent
    
複製程式碼

2.回撥函式，子父通訊

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <p>{props.text}</p>
      <button onClick={() => { props.handleChange('改變了') }}>
        點選我改變爸爸傳給我的東西
      </button>
    </div>
  )
}

function Parent() {
  let [text, setText] = useState('這是爸爸傳給你的東西')
  function handleChange(val) {
    setText(val)
  }
  return (
    <div>
      <p>Parent</p>
      <Children handleChange={handleChange} text={text}></Children>
    </div>
  )
}
export default Parent
複製程式碼

3.變數提升，兄弟組建通訊

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <button onClick={() => { props.setText('我是Children發的資訊') }}>給Children1發資訊</button>
    </div>
  )
}
function Children1(props) {
  return (
    <div>
      <p>Children1</p>
      <p>{props.text}</p>
    </div>
  )
}

function App() {
  let [text, setText] = useState('')
  return (
    <>
      <div>APP</div>
      <Children setText={setText}></Children>
      <Children1 text={text}></Children1>
    </>
  )
}
export default App
複製程式碼

4.Context,跨組建通訊

舊寫法

class Children extends React.Component {
  static contextTypes = {
    text: PropsType.string
  }
  render() {
    return (
      <div>
        <p>Children</p>
        <p>{this.context.text}</p>
      </div>
    )
  }
}

class Parent extends React.Component {
  static childContextTypes = {
    text: PropsType.string
  }
  getChildContext() {
    return {
      text: '我是爸爸的資訊'
    }
  }
  render() {
    return (
        <div>
          <p>Parent</p>
          <Children></Children>
        </div>
    )
  }
}
export default Parent

複製程式碼

新寫法

const { Consumer, Provider } = React.createContext()

class Children extends React.Component {
  render() {
    return (
      <Consumer>
        {
          (value) => (
            <div>
              <p>Children1</p>
              <p>{value.text}</p>
            </div>
          )
        }
      </Consumer>
    )
  }
}

class Parent extends React.Component {
  render() {
    return (
      <Provider value={{ text: '我是context' }}>
        <div>
          <p>Parent</p>
          <Children1></Children1>
        </div>
      </Provider>
    )
  }
}

export default Parent

複製程式碼

5.node的events模組的單例通訊

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <p>{props.text}</p>
      <button onClick={() => { props.event.emit('foo') }}>點選我改變爸爸傳給我的東西</button>
    </div>
  )
}

function Parent() {
  let [text, setText] = useState('這是爸爸傳給你的東西')
  let event = new Events()
  event.on('foo', () => { setText('改變了') })
  return (
    <div>
      <p>Parent</p>
      <Children event={event} text={text}></Children>
    </div>
  )
}
export default Parent
複製程式碼

注意⚠️：這種通訊記住在頂部引入events模組，無需安裝，node自身模組。

6.redux共享資料通訊

store.js

import { createStore } from 'redux'

let defaultState = {
    text: '我是store'
}

let reducer = (state = defaultState, action) => {
    switch (action) {
        default: return state
    }
}

export default createStore(reducer)
複製程式碼

child.js

import React from 'react'

import { connect } from 'react-redux'

class Child extends React.Component {
    render() {
        return (
            <div>Child<p>{this.props.text}</p></div>
        )
    }
}

let mapStataToProps = (state) => {
    return {
        text: state.text
    }
}

export default connect(mapStataToProps, null)(Child)
複製程式碼

Parent.js

class Parent extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <div>
          <p>Parent</p>
          <Child></Child>
        </div>
      </Provider>
    )
  }
}

export default Parent
複製程式碼

注意⚠：記得安裝redux和react-redux。

面試官看了一下，終於露出了大姨夫的笑容。

---

??祖國加油，武漢加油；有國才有家，我們同在??