react的通信方式怎么实现

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

成都创新互联公司是专业的漠河网站建设公司,漠河接单;提供成都网站建设、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行漠河网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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

react的通信方式怎么实现

本教程操作环境: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

注意:记得安装reduxreact-redux

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


分享名称:react的通信方式怎么实现
URL链接:http://myzitong.com/article/psgihp.html