首頁 > web前端 > 前端問答 > react通訊有哪些方式

react通訊有哪些方式

青灯夜游
發布: 2022-03-22 14:33:19
原創
5457 人瀏覽過

react通訊方式有:1、用props進行父子元件通訊;2、用回呼函數進行子父元件通訊;3、用變數提升進行兄弟元件通訊;4、用Context進行跨元件通訊; 5.用node的events模組進行單例通訊;6、用redux共享資料通訊。

react通訊有哪些方式

本教學操作環境:Windows7系統、react17.0.1版、Dell G3電腦。

React的六種通訊方式

       1.props父子通訊
       2.回呼函數,子父通訊
#          2.回呼函數,子父通訊
#          .變數提升,兄弟元件通訊
       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(&#39;改变了&#39;) }}>
        点击我改变爸爸传给我的东西
      </button>
    </div>
  )
}

function Parent() {
  let [text, setText] = useState(&#39;这是爸爸传给你的东西&#39;)
  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(&#39;我是Children发的信息&#39;) }}>给Children1发信息</button>
    </div>
  )
}
function Children1(props) {
  return (
    <div>
      <p>Children1</p>
      <p>{props.text}</p>
    </div>
  )
}

function App() {
  let [text, setText] = useState(&#39;&#39;)
  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 Parent extends React.Component {
  static childContextTypes = {
    text: PropsType.string
  }
  getChildContext() {
    return {
      text: &#39;我是爸爸的信息&#39;
    }
  }
  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: &#39;我是context&#39; }}>
        <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(&#39;foo&#39;) }}>点击我改变爸爸传给我的东西</button>
    </div>
  )
}

function Parent() {
  let [text, setText] = useState(&#39;这是爸爸传给你的东西&#39;)
  let event = new Events()
  event.on(&#39;foo&#39;, () => { setText(&#39;改变了&#39;) })
  return (
    <div>
      <p>Parent</p>
      <Children event={event} text={text}></Children>
    </div>
  )
}
export default Parent
登入後複製
###注意⚠️:這種通訊記住在頂部引入###events###模組,無需安裝,###node###自身模組。 ############6.redux共享資料通訊#############store.js###
import { createStore } from &#39;redux&#39;

let defaultState = {
    text: &#39;我是store&#39;
}

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

export default createStore(reducer)
登入後複製
###child.js###
import React from &#39;react&#39;

import { connect } from &#39;react-redux&#39;

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板