通過props傳遞

共同的數據放在父組件上, 特有的數據放在自己組件內部(state)，通過props可以傳遞一般數據和函數數據, 只能一層一層傳遞

一般數據-->父組件傳遞數據給子組件-->子組件讀取數據

函數數據-->子組件傳遞數據給父組件-->子組件調用函數（相當於vue當中的自定義事件）

案例在：react中使用Ajax請求（axios，Fetch）在這篇文章的分別使用axios和fetch實現一個搜索案例中就有

使用消息訂閱(subscribe)-發布(publish)機制

PubSubJS可以用在任何關系的組件中，如果傳遞的參數有多個就封裝成對象

工具庫: PubSubJS。下載: npm install pubsub-js --save

在需要的組件中引入：import PubSub from ‘pubsub-js‘

PubSub.subscribe(‘delete‘, function(data){ }); //訂閱

PubSub.publish(‘delete‘, data) //發布消息

還是拿react中使用Ajax請求（axios，Fetch）在這篇文章的分別使用axios和fetch實現一個搜索的案例來修改

父組件中什麽都不用做，只負責引入兩個子組件search-list和search-input

import React, {Component} from ‘react‘
import 
 
‘./search.css‘;

import SearchInput from ‘./search-input/search-input‘
import SearchList from ‘./search-list/search-list‘
class Search extends Component {
  render() {
    return (
      <div className=‘search-axios‘>
        <div className=‘search-input-cantain‘>
          <SearchInput/>
        </div>
        <div className=‘search-list-cantain‘>
          <SearchList />
        </div>
      </div>
    )
  }
}
export 
 
default Search

消息發布寫在發送數據的組件中，比如這個案例中發送數據的是search-input這個組件

import React, {Component} from ‘react‘
import ‘./search-input.css‘;
import PubSub from ‘pubsub-js‘

class SearchInput extends Component {
  handleSearch = () => {
    // 獲取輸入框中的數據
    const searchName = this.searchName.value

    // 使用PubSub發布消息,第一個參數是消息名，第二個參數是這個消息的值
    if (searchName) {
      PubSub.publish(‘search‘, searchName)
    }

    // 清空輸入框中的數據
    this.searchName.value = ‘‘
  }

  render() {
    return (
      <div className=‘search-input‘>
        <input type=‘text‘ ref={input => this.searchName = input} placeholder=‘enter the name you search‘/>
        <button onClick={this.handleSearch}>Search</button>
      </div>
    )
  }
}
export default SearchInput

消息訂閱寫在接收消息的組件中（search-list），訂閱消息寫在組件的componentDidMount（初始化已經掛載）周期函數中

import React, {Component} from ‘react‘
import ‘./search-list.css‘;
import PubSub from ‘pubsub-js‘
import axios from ‘axios‘

class SearchList extends Component {

  state = {
    initView: true,
    loading: false,
    users: [],
    errorMsg: null
  }

  // 在此方法中啟動定時器/綁定監聽/發送ajax請求
  async componentDidMount () {
    PubSub.subscribe(‘search‘, (msg, searchName) => {
      // 這個回調函數必須有兩個參數，第一個是消息名，第二個是訂閱的消息的值
      const url = `https://api.github.com/search/users?q=${searchName}`
      this.setState({ initView: false, loading: true })
      axios.get(url)
        .then((response) => {
          this.setState({ loading: false, users: response.data.items })
        })
        .catch((error) => {
          console.log(‘error‘, error.response.data.message, error.message)
          this.setState({ loading: false, errorMsg: error.message })
        })
    });
  }

  render() {
    const {initView, loading, users, errorMsg} = this.state

    if (initView) {
      return <div className=‘search-hide-enter‘>enter the name you search</div>
    } else if (loading) {
      return <div className=‘search-ing‘>搜索中，請稍後.....</div>
    } else if (errorMsg) {
      return <div className=‘search-error‘>{errorMsg}</div>
    } else {
      return (
        <div className=‘search-list‘>
          {users.map((user, index) => (
            <div className=‘search-item‘ key={index}>
              <div className=‘search-item-img‘><img src={user.avatar_url} alt=‘user‘/></div>
              <p className=‘search-item-name‘>{user.login}</p>
            </div>
          ))}
        </div>
      )
    }
  }
}
export default SearchList

redux

組件之間通信的幾種方式