What are the methods of react communication?-Front-end Q&A-php.cn

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.

What are the methods of react 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

Copy after login

2.Callback function, child-parent communication

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

Copy after login

3. Variable promotion, communication among brothers

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

Copy after login

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

Copy after login

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

Copy after login

5.Single instance communication of the events module of node

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

Copy after login

Note⚠️: For this kind of communication, remember to introduce theeventsmodule at the top, no need to install,nodeits 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)

Copy after login

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)

Copy after login

Parent.js

class Parent extends React.Component { render() { return (   Parent
  
  ) } } export default Parent

Copy after login

Note: Remember to installreduxandreact-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!