react的通信方式怎么实现

今天小编给大家分享一下react的通信方式怎么实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

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

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

React的六种通信方式

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

1.props父子通信

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

2.回调函数，子父通信

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.变量提升，兄弟组建通信

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,跨组建通信

旧写法

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

新写法

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.node的events模块的单例通信

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

注意⚠️：这种通信记住在顶部引入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 (            
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

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

以上就是"react的通信方式怎么实现"这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。