消息訂閱-發(fā)布機(jī)制

工具庫(kù): PubSubJS

下載: npm install pubsub-js --save

使用:
1)import PubSub from ‘pubsub-js’ //引入
2)PubSub.subscribe(‘delete’, function(data){ }); //訂閱
3)PubSub.publish(‘delete’, data) //發(fā)布消息

App組件：

import React, {Component} from 'react' import Search from "./components/Search"; import List from "./components/List"; import './App.css'; export default class App extends Component {render() {return (<div className="container"><Search /><List /></div>)} }/*function App() {return (<div><Index /></div>); }*/

Search組件:

import React, {Component} from 'react'; import PubSub from 'pubsub-js' import axios from "axios";class Search extends Component {search = () => {// 獲取用戶的輸入(連續(xù)解構(gòu)賦值+重命名)const {keyWordElement: {value: keyword}} = this// 發(fā)送請(qǐng)求前通知List更新?tīng)顟B(tài)// this.props.updateAppState({isFirst: false, isLoading: true})PubSub.publish('zep', {isFirst: false, isLoading: true})// 發(fā)送網(wǎng)絡(luò)請(qǐng)求axios.get(`https://api.github.com/search/users?q=${keyword}`).then((response) => {// 請(qǐng)求成功后通知List更新?tīng)顟B(tài)// this.props.updateAppState({isLoading: false, users: response.data.items})console.log('Search組件發(fā)布消息')PubSub.publish('zep', {isLoading: false, users: response.data.items})},(error) => {// this.props.updateAppState({isLoading: false, err: error.message})PubSub.publish('zep', {isLoading: false, err: error.message})})}render() {return (<section className="jumbotron" style={{textAlign: "center"}}><h3 className="jumbotron-heading">搜索github用戶</h3><div><input ref={c => this.keyWordElement = c} type="text" placeholder="輸入關(guān)鍵詞點(diǎn)擊搜索"/>&nbsp;<button onClick={this.search}>搜索</button></div></section>);} }export default Search;

List組件：

import React, {Component} from 'react'; import PubSub from 'pubsub-js' import './index.css'class List extends Component {state = {// 初始化狀態(tài)users: [], // users初始值為數(shù)組isFirst: true, // 是否為第一次打開(kāi)頁(yè)面isLoading: false, // 標(biāo)識(shí)是否處于加載中err: '' // 存儲(chǔ)請(qǐng)求相關(guān)的錯(cuò)誤信息}componentDidMount() {// 訂閱消息this.token = PubSub.subscribe('zep', (msg, stateObj) => {console.log('List組件訂閱消息', stateObj)this.setState(stateObj)})}componentWillUnmount() {PubSub.unsubscribe(this.token)}render() {const {users, isFirst, isLoading, err} = this.statereturn (<div className="row">{isFirst ? <h2>歡迎使用，輸入關(guān)鍵字，隨后點(diǎn)擊搜索</h2> :isLoading ? <h2>Loading...</h2> :err ? <h2 style={{color: 'red'}}>{err}</h2> :users.map((userObj) => {return (<div className="card" key={userObj.id}><a href={userObj.html_url} rel="noreferrer" target="_blank"><img alt="avatar" src={userObj.avatar_url} style={{width: '100px'}}/></a><p className="card-text">{userObj.login}</p></div>)})}</div>);} }export default List;

總結(jié)

以上是生活随笔為你收集整理的react 消息订阅-发布机制(解决兄弟组件通信问题)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。