react通信有哪些方式-前端问答-PHP中文网

react通信有哪些方式

青灯夜游

发布： 2022-03-22 14:33:19

原创

5805人浏览过

react通信方式有：1、用props进行父子组件通信；2、用回调函数进行子父组件通信；3、用变量提升进行兄弟组件通信；4、用Context进行跨组件通信；5、用node的events模块进行单例通信；6、用redux共享数据通信。

react通信有哪些方式

本教程操作环境：Windows7系统、react17.0.1版、Dell G3电脑。

React的六种通信方式

1.props父子通信
2.回调函数，子父通信
3.变量提升，兄弟组件通信
4.Context,跨组件通信
5.node的events模块的单例通信
6.redux共享数据通信

1.props父子通信

function Children(props) {
      return (
        <div>
          <p>Children</p>
          <p>{props.text}</p>
        </div>
      )
    }
    function Parent() {
      return (
        <div>
          <p>Parent</p>
          <Children text="这是爸爸传给你的东西"></Children>
        </div>
      )
    }
    
    export default Parent

登录后复制

2.回调函数，子父通信

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <p>{props.text}</p>
      <button onClick={() => { props.handleChange('改变了') }}>
        点击我改变爸爸传给我的东西
      </button>
    </div>
  )
}

function Parent() {
  let [text, setText] = useState('这是爸爸传给你的东西')
  function handleChange(val) {
    setText(val)
  }
  return (
    <div>
      <p>Parent</p>
      <Children handleChange={handleChange} text={text}></Children>
    </div>
  )
}
export default Parent

登录后复制

3.变量提升，兄弟组建通信

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <button onClick={() => { props.setText('我是Children发的信息') }}>给Children1发信息</button>
    </div>
  )
}
function Children1(props) {
  return (
    <div>
      <p>Children1</p>
      <p>{props.text}</p>
    </div>
  )
}

function App() {
  let [text, setText] = useState('')
  return (
    <>
      <div>APP</div>
      <Children setText={setText}></Children>
      <Children1 text={text}></Children1>
    </>
  )
}
export default App

登录后复制

4.Context,跨组建通信

旧写法

class Children extends React.Component {
  static contextTypes = {
    text: PropsType.string
  }
  render() {
    return (
      <div>
        <p>Children</p>
        <p>{this.context.text}</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/11201">
                            <img src="https://img.php.cn/upload/webcode/000/000/014/176528880391936.png" alt="BJXSHOP网上购物系统 - 书店版">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/11201">BJXSHOP网上购物系统 - 书店版</a>
                            <p>BJXSHOP购物管理系统是一个功能完善、展示信息丰富的电子商店销售平台；针对企业与个人的网上销售系统；开放式远程商店管理；完善的订单管理、销售统计、结算系统；强力搜索引擎支持；提供网上多种在线支付方式解决方案；强大的技术应用能力和网络安全系统     BJXSHOP网上购物系统 - 书店版，它具备其他通用购物系统不同的功能，有针对图书销售而进行开发的一个电子商店销售平台，如图书ISBN，图书目录</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="BJXSHOP网上购物系统 - 书店版">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/11201" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="BJXSHOP网上购物系统 - 书店版">
                        </a>
                    </div>
                
      </div>
    )
  }
}

class Parent extends React.Component {
  static childContextTypes = {
    text: PropsType.string
  }
  getChildContext() {
    return {
      text: '我是爸爸的信息'
    }
  }
  render() {
    return (
        <div>
          <p>Parent</p>
          <Children></Children>
        </div>
    )
  }
}
export default Parent

登录后复制

新写法

const { Consumer, Provider } = React.createContext()

class Children extends React.Component {
  render() {
    return (
      <Consumer>
        {
          (value) => (
            <div>
              <p>Children1</p>
              <p>{value.text}</p>
            </div>
          )
        }
      </Consumer>
    )
  }
}

class Parent extends React.Component {
  render() {
    return (
      <Provider value={{ text: '我是context' }}>
        <div>
          <p>Parent</p>
          <Children1></Children1>
        </div>
      </Provider>
    )
  }
}

export default Parent

登录后复制

5.node的events模块的单例通信

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <p>{props.text}</p>
      <button onClick={() => { props.event.emit('foo') }}>点击我改变爸爸传给我的东西</button>
    </div>
  )
}

function Parent() {
  let [text, setText] = useState('这是爸爸传给你的东西')
  let event = new Events()
  event.on('foo', () => { setText('改变了') })
  return (
    <div>
      <p>Parent</p>
      <Children event={event} text={text}></Children>
    </div>
  )
}
export default Parent

登录后复制

注意⚠️：这种通信记住在顶部引入events模块，无需安装，node自身模块。

6.redux共享数据通信

store.js

import { createStore } from 'redux'

let defaultState = {
    text: '我是store'
}

let reducer = (state = defaultState, action) => {
    switch (action) {
        default: return state
    }
}

export default createStore(reducer)

登录后复制

child.js

import React from 'react'

import { connect } from 'react-redux'

class Child extends React.Component {
    render() {
        return (
            <div>Child<p>{this.props.text}</p></div>
        )
    }
}

let mapStataToProps = (state) => {
    return {
        text: state.text
    }
}

export default connect(mapStataToProps, null)(Child)

登录后复制

Parent.js

class Parent extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <div>
          <p>Parent</p>
          <Child></Child>
        </div>
      </Provider>
    )
  }
}

export default Parent

登录后复制

注意：记得安装redux和react-redux。

【相关推荐：Redis视频教程】

以上就是react通信有哪些方式的详细内容，更多请关注php中文网其它相关文章！