什么是組件通訊？組件通訊的三種方式

組件是獨立且封閉的單元，默認情況下，只能使用組件自己的數據。在組件化過程中，我們將一個完整的功能拆分成多個組件，以更好的完成整個應用的功能。而在這個過程中，多個組件之間不可避免的要共享某些數據。為了實現這些功能，就需要打破組件的獨立封閉性，讓其與外界溝通。這個過程就是組件通訊。組件通訊是構建 React 應用必不可少的一環。

組件是封閉的，組件之間的通訊有3種方式，分別是父組件到子組件，子組件到父組件和兄弟組件之間的通訊，下面分別看它們的用法。

1.組件傳遞數據給子組件

父組件提供要傳遞的state數據，給子組件標簽添加屬性，值為 state 中的數據，子組件中通過 props 接收父組件中傳遞的數據。

class Parent extends React.Component {
  state = { lastName: '王' }
  render() {
    return   (
      <div>
        傳遞數據給子組件：<Child name={this.state.lastName} />
      </div>
    )
  }
}

function Child(props) {
  return <div>子組件接收到數據：{props.name}</div>
}

2.子組件傳遞數據給父組件

利用回調函數，父組件提供回調，子組件調用，將要傳遞的數據作為回調函數的參數。
我們需要先利用父組件提供一個回調函數(用于接收數據)，再將該函數作為屬性的值，傳遞給子組件，示例代碼如下：

class Parent extends React.Component {
  getChildMsg = (msg) => {
    console.log('接收到子組件數據', msg)
  }
  render() {
    return (
      <div>
        子組件：<Child getMsg={this.getChildMsg} />
      </div>
   )
  }
}

子組件通過 props 調用回調函數，將子組件的數據作為參數傳遞給回調函數。

class Child extends React.Component {
  state = { childMsg: 'React' } 
  handleClick = () => {
    this.props.getMsg(this.state.childMsg)
  }
  return (
    <button onClick={this.handleClick}>點我，給父組件傳遞數據</button>
  )
}

注意：回調函數中 this 指向問題!

3.兄弟組件

將共享狀態提升到最近的公共父組件中，由公共父組件管理這個狀態其中公共父組件職責是提供共享狀態和操作共享狀態的方法。要通訊的子組件只需通過 props 接收狀態或操作狀態的方法。