React如何实现任意组件的通信

努力了吗梁同学
197 阅读3分钟

场景

现在有一个家庭，他们有10w的财产。家庭成员分别有爸爸1、爸爸2。他们分别有两个孩子，儿子11、儿子12、儿子21、儿子22。现在要实现家族中每位成员花费金额时，其他成员都需要知道。

方法一 eventHub（非单项数据流）

找个跑腿的。在每次消费后去通知另一位成员。

代码

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.0-rc.0/umd/react.production.min.js"></script>
  <script
    src="https://cdn.bootcdn.net/ajax/libs/react-dom/0.0.0-0c756fb-f7f79fd/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.home {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  color: #fff;
  background: #000;
}

.father {
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #fff;
}

.son {
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #fff;
}

JSX

// 财产
let money = {
  amount: 100000
}

// 跑腿需要监听的事件
let fnLists = {}
let 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)
  }
}

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      money: money
    }
  }

  render() {
    return (
      <div className="home">
        <Father1 money={this.state.money}/>
        <Father2 money={this.state.money}/>
      </div>
    )
  }
}

class Father1 extends React.Component {
  constructor() {
    super()
    this.state = {
      money: money
    }
  }

  render() {
    return (
      <div className="father">
        Father1 {this.state.money.amount}
        <Son11 money={this.state.money}/>
        <Son12 money={this.state.money}/>
      </div>
    )
  }
}

class Son11 extends React.Component {
  constructor() {
    super()
    this.state = {
      money: money
    }
  }

  render() {
    return (
      <div className="son">
        son11 {this.state.money.amount}
      </div>
    )
  }
}

class Son12 extends React.Component {
  constructor() {
    super()
    this.state = {
      money: money
    }
    // 监听别人是否花钱
    eventHub.on("我想花钱", (data)=>{
      this.setState({
        money: money
      })
    })
  }
  // 通知跑腿需要花钱
  x() {
    money.amount -= 100
    eventHub.trigger("我想花钱", 100)
    this.setState({
      money: money
    })
  }

  render() {
    return (
      <div className="son">
        son12 {this.state.money.amount}
        <button onClick={() => this.x()}>花钱</button>
      </div>
    )
  }
}

class Father2 extends React.Component {
  constructor() {
    super()
  }

  render() {
    return (
      <div className="father">
        Father2 {this.props.money.amount}
        <Son21 money={this.props.money}/>
        <Son22 money={this.props.money}/>
      </div>
    )
  }
}

class Son21 extends React.Component {
  constructor() {
    super()
  }

  render() {
    return (
      <div className="son">
        son21 {this.props.money.amount}
      </div>
    )
  }
}

class Son22 extends React.Component {
  constructor() {
    super()
    // 监听别人是否花钱
    eventHub.on("我想花钱", (data)=>{
      this.setState({
        money: money
      })
    })
  }
  // 通知跑腿需要花钱
  x(){
    money.amount -= 100
    eventHub.trigger("我想花钱", 100)
    this.setState({
      money: money
    })
  }
  render() {
    return (
      <div className="son">
        son22 {this.props.money.amount}
        <button onClick={()=>this.x()}>花钱</button>
      </div>
    )
  }
}

render()

function render() {
  ReactDOM.render(<App/>, document.querySelector("#root"))
}

解析

代码预览

提前跟跑腿的说明，每当son22花钱时，通知son11有人花钱了。从而更新信息。

每个人消费跑腿都需要来回通知效率很慢。需要实现告诉跑腿的要监听谁消费了。

方法二 eventHub（单向数据流）

找一个管家，每次消费都去向下通知所有成员。

代码

HTML

与上次一样的代码，这里就不重复了

CSS

与上次一样的代码，这里就不重复了

JSX

// 财产
let money = {
  amount: 100000
}

// 事件中心
let fnLists = {}
let 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)
  }
}

// 管家
let x = {
  init() {
    eventHub.on("我想花钱", function (data) {
      money.amount -= data
      render()
    })
  }
}

x.init()

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      money: money
    }
  }

  render() {
    return (
      <div className="home">
        <Father1 money={this.state.money}/>
        <Father2 money={this.state.money}/>
      </div>
    )
  }
}

class Father1 extends React.Component {
  constructor() {
    super()
  }

  render() {
    return (
      <div className="father">
        Father1 {this.props.money.amount}
        <Son11 money={this.props.money}/>
        <Son12 money={this.props.money}/>
      </div>
    )
  }
}

class Son11 extends React.Component {
  constructor() {
    super()
  }

  render() {
    return (
      <div className="son">
        son11 {this.props.money.amount}
      </div>
    )
  }
}

class Son12 extends React.Component {
  constructor() {
    super()
  }

  x() {
    eventHub.trigger("我想花钱", 100)
  }

  render() {
    return (
      <div className="son">
        son12 {this.props.money.amount}
        <button onClick={() => this.x()}>花钱</button>
      </div>
    )
  }
}

class Father2 extends React.Component {
  constructor() {
    super()
  }

  render() {
    return (
      <div className="father">
        Father2 {this.props.money.amount}
        <Son21 money={this.props.money}/>
        <Son22 money={this.props.money}/>
      </div>
    )
  }
}

class Son21 extends React.Component {
  constructor() {
    super()
  }

  render() {
    return (
      <div className="son">
        son21 {this.props.money.amount}
      </div>
    )
  }
}

class Son22 extends React.Component {
  constructor() {
    super()
  }

  render() {
    return (
      <div className="son">
        son22 {this.props.money.amount}
      </div>
    )
  }
}

render()

function render() {
  ReactDOM.render(<App/>, document.querySelector("#root"))
}

解析

预览地址

全部数据统一由管家来下发更新

方法三 redux（单向数据流）

与eventHub的思路一样

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.0-rc.0/umd/react.production.min.js"></script>
  <script
    src="https://cdn.bootcdn.net/ajax/libs/react-dom/0.0.0-0c756fb-f7f79fd/umd/react-dom.production.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/redux/4.0.5/redux.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

CSS

与上次一样的代码，这里就不重复了

JSX

// redux
let createStore = Redux.createStore
let reducers = (state, action) => {
  state = state || {
    money: {amount: 100000}
  }
  switch (action.type) {
    case "我想花钱":
      return {
        money: {
          amount: state.money.amount - action.payload
        }
      }
    default:
      return state
  }
}

const store = createStore(reducers)

class App extends React.Component {
  constructor() {
    super()
  }

  render() {
    return (
      <div className="home">
        <Father1 money={this.props.store.money}/>
        <Father2 money={this.props.store.money}/>
      </div>
    )
  }
}

class Father1 extends React.Component {
  constructor() {
    super()
  }

  render() {
    return (
      <div className="father">
        Father1 {this.props.money.amount}
        <Son11 money={this.props.money}/>
        <Son12 money={this.props.money}/>
      </div>
    )
  }
}

class Son11 extends React.Component {
  constructor() {
    super()
  }

  render() {
    return (
      <div className="son">
        son11 {this.props.money.amount}
      </div>
    )
  }
}

class Son12 extends React.Component {
  constructor() {
    super()
  }

  x() {
    store.dispatch({type: "我想花钱", payload: 100})
  }

  render() {
    return (
      <div className="son">
        son12 {this.props.money.amount}
        <button onClick={() => this.x()}>花钱</button>
      </div>
    )
  }
}

class Father2 extends React.Component {
  constructor() {
    super()
  }

  render() {
    return (
      <div className="father">
        Father2 {this.props.money.amount}
        <Son21 money={this.props.money}/>
        <Son22 money={this.props.money}/>
      </div>
    )
  }
}

class Son21 extends React.Component {
  constructor() {
    super()
  }

  render() {
    return (
      <div className="son">
        son21 {this.props.money.amount}
      </div>
    )
  }
}

class Son22 extends React.Component {
  constructor() {
    super()
  }

  render() {
    return (
      <div className="son">
        son22 {this.props.money.amount}
      </div>
    )
  }
}

function render() {
  ReactDOM.render(<App store={store.getState()}/>, document.querySelector("#root"))
}

render()
store.subscribe(render)
avatar
文章
阅读
粉丝
相关推荐
React全家桶 - 【React】 - 【3】组件进阶（组件通信、父子通信、兄弟通信、跨层级通信）
1.4k阅读
 · 
3点赞
多种 React 组件通信方式实践
983阅读
 · 
15点赞
Vue3如何优雅的跨组件通信🚀🚀🚀
25k阅读
 · 
145点赞
React 组件库都是怎么打包的？
12k阅读
 · 
200点赞
React--组件间通信
734阅读
 · 
2点赞
让你 React 组件水平暴增的 5 个技巧
33k阅读
 · 
698点赞
在 React Router 中使用 JWT
302k阅读
 · 
172点赞
2023 再谈 React 组件通信
2.9k阅读
 · 
39点赞
使用发布订阅模式实现 react 跨组件通信
1.7k阅读
 · 
19点赞
基于 ChatGPT 和 React 搭建 JSON 转 TS 的 Web 应用
254k阅读
 · 
214点赞

友情链接：