What are the methods of react communication?

React communication methods include: 1. Use props for parent-child component communication; 2. Use callback functions for child-parent component communication; 3. Use variable promotion for sibling component communication; 4. Use Context for cross-component communication; 5. Use node’s events module for single instance communication; 6. Use redux to share data communication.

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

Six communication methods of React

1. Props parent-child communication
2. Callback function, child-father communication
3 .Variable promotion, sibling component communication
4.Context, cross-component communication
5.Single instance communication of node’s events module
6.redux shared data communication

1.propsFather-child communication

function Children(props) {
      return (
        

          
Children
          
{props.text}
        
      )
    }
    function Parent() {
      return (
        

          
Parent
          
        
      )
    }
    
    export default Parent

2.Callback function, child-parent communication

function Children(props) {
  return (
    

      
Children
      
{props.text}
       { props.handleChange('改变了') }}>
        点击我改变爸爸传给我的东西
      
    
  )
}

function Parent() {
  let [text, setText] = useState('这是爸爸传给你的东西')
  function handleChange(val) {
    setText(val)
  }
  return (
    

      
Parent
      
    
  )
}
export default Parent

3. Variable promotion, communication among brothers

function Children(props) {
  return (
    

      
Children
       { props.setText('我是Children发的信息') }}>给Children1发信息
    
  )
}
function Children1(props) {
  return (
    

      
Children1
      
{props.text}
    
  )
}

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

4.Context, communication across groups

Old way of writing

class Children extends React.Component {
  static contextTypes = {
    text: PropsType.string
  }
  render() {
    return (
      

        
Children
        
{this.context.text}
      
    )
  }
}

class Parent extends React.Component {
  static childContextTypes = {
    text: PropsType.string
  }
  getChildContext() {
    return {
      text: '我是爸爸的信息'
    }
  }
  render() {
    return (
        

          
Parent
          
        
    )
  }
}
export default Parent

New way of writing

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

class Children extends React.Component {
  render() {
    return (
      
        {
          (value) => (
            

              
Children1
              
{value.text}
            
          )
        }
      
    )
  }
}

class Parent extends React.Component {
  render() {
    return (
      
        

          
Parent
          
        
      
    )
  }
}

export default Parent

5.Single instance communication of the events module of node

function Children(props) {
  return (
    

      
Children
      
{props.text}
       { props.event.emit('foo') }}>点击我改变爸爸传给我的东西
    
  )
}

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

      
Parent
      
    
  )
}
export default Parent

Note⚠️: For this kind of communication, remember to introduce the events module at the top, no need to install, node its own module.

6.redux shared data communication

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 (
            
Child
{this.props.text}
        )
    }
}

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

export default connect(mapStataToProps, null)(Child)

Parent.js

class Parent extends React.Component {
  render() {
    return (
      
        

          
Parent
          
        
      
    )
  }
}

export default Parent

Note: Remember to install redux and react-redux.

[Related recommendations: Redis video tutorial]

The above is the detailed content of What are the methods of react communication?. For more information, please follow other related articles on the PHP Chinese website!