4.组件通信-eventHub
2019-02-18 本文已影响0人
阿鲁提尔
1.回顾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
class App extends React.Component{
constructor(){
super()
this.state = {
message: '你好'
}
}
changeMessage(){
this.setState({
message: '真好'
})
}
render(){
return(
<div>hi
<Foo message={this.state.message}
fn={this.changeMessage.bind(this)} />
</div>
)
}
}
function Foo(props){
return (
<p>我得到的message是{props.message}
<button onClick={props.fn}>click</button>
</p>
)
}
ReactDOM.render(<App/>,document.querySelector("#app"))
</script>
</body>
</html>
2.使用eventHub实现通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
</head>
<body>
<style>
.root{
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
padding: 10px;
}
.papa{
border: 1px solid grey;
padding: 10px;
margin: 10px;
}
.son{
border: 1px solid grey;
padding: 10px;
margin: 10px 0;
}
</style>
<div id="app"></div>
<script>
var money = {
amount: 100000
}
var fnLists = {}
// 发布订阅
var eventHub = {
trigger(eventName,data){
let fnList = fnLists[eventName]
if(!fnList){return}
for(let i = 0;i<fnList.length;i++){
fnList[i](data)
}
},
on(eventName,fn){
if(!fnLists[eventName]){
fnLists[eventName] = []
}
fnLists[eventName].push(fn)
}
}
var x = { //管家
init(){
eventHub.on('我想花钱',function(data){
money.amount -= data
render()
})
}
}
x.init()
// eventHub.on('我要用钱',function fn1(){})
// eventHub.trigger('我要用钱',100)
//button.on('click',function(data){data==='x'}) //订阅
//button.trigger('click','x') //发布
// click 事件名称
class App extends React.Component{
constructor(){
super()
this.state = {
money: money
}
}
changeMessage(){
this.setState({
message: '真好'
})
}
render(){
return(
<div className="root">
<BigPapa money={this.state.money} />
<YoungPapa money={this.state.money} />
</div>
)
}
}
class BigPapa extends React.Component{
constructor(){
super()
// this.state={
// money: money
// }
}
render(){
return (
<div className="papa">大爸 {this.props.money.amount}
<Son1 money={this.props.money} />
<Son2 money={this.props.money} />
</div>
)
}
}
class YoungPapa extends React.Component{
constructor(){
super()
}
render(){
return (
<div className="papa">二爸 {this.props.money.amount}
<Son3 money={this.props.money} />
<Son4 money={this.props.money} />
</div>
)
}
}
class Son1 extends React.Component{
constructor(){
super()
}
render(){
return (
<div className="son">儿子1 {this.props.money.amount}</div>
)
}
}
class Son2 extends React.Component{
constructor(){
super()
}
x(){
// money.amount -= 100
eventHub.trigger('我想花钱',100)
// this.setState({
// money: money
// })
}
render(){
return (
<div className="son">儿子2 {this.props.money.amount}
<button onClick={()=>this.x()}>消费</button>
</div>
)
}
}
class Son3 extends React.Component{
constructor(){
super()
}
render(){
return (
<div className="son">儿子3 {this.props.money.amount}</div>
)
}
}
class Son4 extends React.Component{
constructor(){
super()
}
render(){
return (
<div className="son">儿子4 {this.props.money.amount}</div>
)
}
}
function render(){
ReactDOM.render(<App/>,document.querySelector("#app"))
}
render()
</script>
</body>
</html>
预览地址
