Home >Web Front-end >Front-end Q&A >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 ( <div> <p>Children</p> <p>{props.text}</p> </div> ) } function Parent() { return ( <div> <p>Parent</p> <Children text="这是爸爸传给你的东西"></Children> </div> ) } export default Parent
2.Callback function, child-parent communication
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. Variable promotion, communication among brothers
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, communication across groups
Old way of writing
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: '我是爸爸的信息' } } render() { return ( <div> <p>Parent</p> <Children></Children> </div> ) } } export default Parent
New way of writing
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.Single instance communication of the events module of node
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
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 ( <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
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!