广东省建设信息港网站,WordPress手机缩略图设置,凡科建站代理平台,影楼网站模版PubSubJS库介绍
如果你想在React中使用第三方库来实现Pub/Sub机制#xff0c;PubSubJS是一个不错的选择。它是一个轻量级的库#xff0c;可以在浏览器和Node.js环境中使用。
PubSubJS提供了一个简单的API#xff0c;可以让你在应用程序中订阅和发布消息。你可以使用npm来安…PubSubJS库介绍
如果你想在React中使用第三方库来实现Pub/Sub机制PubSubJS是一个不错的选择。它是一个轻量级的库可以在浏览器和Node.js环境中使用。
PubSubJS提供了一个简单的API可以让你在应用程序中订阅和发布消息。你可以使用npm来安装它
npm install pubsub-js1-引入使用
import PubSub from pubsub-js2-首先订阅消息
PubSub.subscribe(List,function(msg, data){ console.log(msg, data)})用于接收发布的信息。
3-发布消息
PubSub.publish(List,data)4-取消订阅消息
PubSub.unsubscribe(this.token)案例使用
现在有一个页面有两个兄弟组件
Search组件获取输入的关键字然后交给List组件去网络请求。List组件展示github的用户列表
1-App组件代码
import React, { Component } from react
import Search from ./components/Search
import List from ./components/Listexport default class App extends Component {render() {return (div classNamecontainerSearch/List//div)}
}2-Search组件代码
import React, { Component } from react
import PubSubJs from pubsub-jsexport default class Search extends Component {searchHandle () {const {KeyVal:{value}} thisPubSubJs.publish(getSearchVal,value)}render() {return (section classNamejumbotronh3 classNamejumbotron-headingSearch Github Users/h3divinput ref{cthis.KeyVal c} typetext placeholder关键字/button onClick{this.searchHandle}Search/button/div/section)}
}3-List组件代码
import React, { Component } from react
import PubSubJs from pubsub-js
import axios from axios
import ./index.css
export default class List extends Component {state {users: [],isFirst: true,isLoading: false,err: ,}getSearchFunc (msg, data) {console.log(接收的信息, data)this.setState({ users: [], isFirst: false, isLoading: true })axios.get(https://api.github.com/search/users?q${data}).then((res) {this.setState({ users: res.data.items, isFirst: false, isLoading: false })console.log(请求成功了, res.data)},(err) {console.log(请求失败了, err)this.setState({isFirst: false, isLoading: false,err:err.message })}).catch(() {})}componentDidMount() {this.token PubSubJs.subscribe(getSearchVal, this.getSearchFunc)}componentWillUnmount() {PubSubJs.unsubscribe(this.token)}render() {const { users, isFirst, isLoading, err } this.statereturn (div classNamerow{isFirst ? (h2欢迎搜索/h2) : isLoading ? (h2Loading.../h2) : err ? (h3{err}/h3) : (users.map((userObj) {return (div classNamecard key{userObj.id}a href{userObj.html_url} target_blank relnoreferrerimgalt头像src{userObj.avatar_url}style{{ width: 100px }}//ap classNamecard-text{userObj.login}/p/div)}))}/div)}
}
4-效果展示 总结
1- 设计状态时要考虑全面例如有网络请求的时候要考虑网络延迟和请求失败的状态处理。
2- ES6小知识点解构赋值 重命名
let obj {a:{b:1}}
const { a } obj // 传统的解构赋值
const { a:{b} } obj // 连续的解构赋值
const { a:{b:value} } obj // 连续解构赋值 重命名3- 消息订阅与发布机制
I. 先订阅再发布 一种隔空对话的感觉
II. 适用于任意组件的通信
III. 要在组件componentWillUnmount生命钩子中取消订阅
4- 扩展fetch发送请求关注分离的设计思想
async func () {try {const res await fetch(url)const data await res.json()console.log(data)} catch(error) {console.log(error)}
}
