React中组件通信及高阶组件使用

最新推荐文章于 2022-10-05 00:00:00 发布
最新推荐文章于 2022-10-05 00:00:00 发布
阅读量525 收藏 1
点赞数
分类专栏： 整理 文章标签： React中组件通信及高阶组件使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40616529/article/details/95530267
版权

一、 React中组件通信主要分为：

  • 父子组件通信
  • 子父组件通信
  • 非父子组件通信
  • 跨组件通信
  • 多组件状态共享

这里主要对上述前四种通信方式举例说明：

父子组件通信

父子组件通信
无论父组件传递是props还是state,子组件都是通过props接收
父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变

//父组件
import React , {Component} from 'react';
import Son from './Son'

class Father extends Component{

   //定义数据并传给子组件
   constructor(){
      super()
      this.state = {
         name:'father',
         give:1000,
      }
   }

   render(){
      return (
         <div>
            <h3>这里是父组件</h3>
            <hr/>
            <Son {...this.state}></Son>
         </div>
      )
   }
}

export default Father;

=========================================================================================

//子组件

import React , { Component } from 'react';

class Son extends Component{
   render(){
      return (
         <div>
            <h3>这里是Son 组件</h3>
            <p>父组件传过来的内容： { this.props.name } 给Son {this.props.give} </p>
         </div>
      )
   }
}
export default Son;

在这里插入图片描述

子父组件通信

父组件将自己的某个方法传递给子组件，在方法里可以做任意操作，比如可以更改状态，子组件通过this.props接收到父组件的方法后调用。通知父组件进行相应操作。
​ 注意： 组件自己的状态组件自己更改

//父组件
import React , { Component,Fragment  } from 'react';

import Son from './Son.js';


class Father extends Component {

   constructor () {
      super()
      this.state={
         name:'Son',
         flag:false,
         msg:''
      }
   }

   giveMoney=(val)=>{
      this.setState({
         flag:!this.state.flag,
         msg:val ,
      })
   }
   
   render(){
      return (
         <Fragment>
            <h3>这里是Father组件</h3>
            
            <hr/>
            <Son giveMoney={this.giveMoney}></Son>
            <p> { this.state.flag ? this.state.msg:'' } </p>
         </Fragment>
      )
   }
}

export default Father;
=============================================================================================

//子组件

import React ,{ Component , Fragment} from 'react';

class Son extends Component {
   render(){
      return (
         <Fragment>
               <h3>这里是Son</h3>
               <button 
               // 事件传参需要在定义一个箭头函数，在函数内传参，否则会报错
               onClick= { ()=>{this.props.giveMoney('给父亲2000元红包')} } 
               >发红包</button>
         </Fragment>
      )
   }
}

export default Son;
非父子组件通信

通过ref链来实现，借助父组件实现两个非父子组件之间的融信
举个例子：实现 姐姐给弟弟红包，弟弟开心笑，----需要逻辑，姐姐通过方法，改变弟弟状态

//Son 子组件
import React ,{ Component,Fragment} from 'react';

  class Son extends Component {     
     constructor(){
        super()
        this.state={
           flag:false,//定义一条数据控制Son组件部分内容的显示状态
        }
     }

     change=()=>{
        this.setState({
           flag :!this.state.flag,
        })
     }

     render (){
        return (
           <Fragment>
              {/* 将change 方法通过属性传递到父组件内 */}
              <h3>这里是Son组件</h3>
              { this.state.flag && <p>弟弟开心的笑~~~(*^_^*)(*^_^*)(*^_^*)(*^_^*)(*^_^*)</p> }
           </Fragment>
        )
     }
  }

  export default Son;
  
=========================================================================================
//Gril 子组件
import React ,{ Component,Fragment} from 'react';

 class Gril extends Component {
    render(){
       return (
          <Fragment>
             <h3>这里是Grill组件</h3>
             <button onClick = {this.props.handleClick} >给弟弟红包</button>
          </Fragment>
       )
    }
 }

 export default Gril;

===========================================================================================
// Father父组件
import React ,{ Component,Fragment } from 'react';
import Son from './Son';
import Gril from './Gril';

class Father extends Component {

   constructor(){
      super()
      console.log(this)//控制台打印Father组件
   }

   handleClick = () => {//定义一个方法触发Son组件的方法
     this.refs.son.change ()    
   }

   render(){
      return (
         <Fragment>
            <h3>这里是Father组件</h3>
            <hr/>
          
           {/* 将调用son组件的方法，通过father组件的方法传给gril组件 */}
           <Gril ref ="gril" handleClick = { this.handleClick } ></Gril>
            <hr/>

            {/* 在父组件内通过ref 绑定，父组件可以访问到子组件的方法*/}
            <Son ref = "son"></Son>
         </Fragment>
      )
   }
}

export default Father;

通过ref绑定后打印Father组件的this，可以查看到子组件的属性
在这里插入图片描述

除此之外，ref绑定也可以有另一种常用使用方式

import React ,{ Component,Fragment } from 'react';

import Son from './Son';
import Gril from './Gril';

class Father extends Component {

   constructor(){
      super()
      console.log(this)//控制台打印Father组件
   }

   handleClick = () => {
     this.son.change ()  // ref = { el => this.xxx = el } 绑定使用方法
   }


   render(){
      return (
         <Fragment>
            <h3>这里是Father组件</h3>
            <hr/>
          
           {/* 将调用son组件的方法，通过father组件的方法传给gril组件 */}
           <Gril ref ={ el => this.gril = el } handleClick = { this.handleClick } ></Gril>
            <hr/>

            {/* 直接将son属性通过this绑定在父组件的属性上，使用时直接通过this调用*/}
            <Son ref ={ el => this.son = el }></Son>
         </Fragment>
      )
   }
}

export default Father;

两种绑定实现结果相同，但是更推荐使用第二种方法，直接绑定为父组件的属性，看一下第二种绑定的结果，以及点击实现效果
在这里插入图片描述

跨组件通信

在react没有类似vue中的事件总线来解决这个问题，我们只能借助它们共同的父级组件来实现，将非父子关系装换成多维度的父子关系。react提供了context api来实现跨组件通信, React 16.3之后的contextapi较之前的好用。

  • 使用流程：

创建上下文 React.createContext()

使用上下文包裹目标组件的父组件
   <MoneyContext.Provider value = { money }>
    	<Father></Father>
    </MoneyContext.Provider>

在目标组件中先定义一个静态属性 static contextType = MoneyContext
通过 this.context来使用数据

  • 实例：
//实现grandfather直接给son200元钱

import React ,{ Component,Fragment} from 'react';

//创建上下文投影
const  GiveMoney = React.createContext();


//子组件
class Son extends Component{
   //在目标组件中定义一个静态属性static
   static contextType = GiveMoney;

   render(){
      return (
         <Fragment>
            <h3>这里是Son组件</h3>
            {/* 通过this.context 使用GrandFather组件传来的数据 */}
            <p> 祖父给我{ this.context } 元钱</p>
         </Fragment>
      )
   }
}


//父组件
class Father extends Component{
   render(){
      return (
         <Fragment>
            <h3>这里是Father组件</h3>
            <hr/>
            <Son></Son>
         </Fragment>
      )
   }
}


class GrandFather extends Component {

   constructor(){
      super()
      this.state={
         msg:500
      }
   }

   render(){
      return (
         <Fragment>
            <h2>这里是GrandFather组件</h2>
            <hr/>
            {/* 使用上下文包裹目标组件的父组件，使用value属性传输数据 */}
            <GiveMoney.Provider value = { this.state.msg }>
               <Father></Father>
            </GiveMoney.Provider>
         </Fragment>
      )
   }
}

export default GrandFather;

在这里插入图片描述

二、HOC(高阶组件 — — Higher-Order Components)

Higher-Order Components就是一个函数，传给它一个组件，它返回一个新的组件。

高阶组件是一个函数

  • 这个函数中接收一个参数，这个参数是一个组件
  • 作用
    1. 让外层组件帮助我们完成任务，里层组件直接使用结果
    2. 实现一些属性或是方法的复用
  • 两层组件的嵌套
  • 外层组件我们称为： 容器组件 【 木耦组件 】
  • 里层组件我们称为： UI组件

import React ,{ Component,Fragment } from 'react';
import Content from './Content';
import Wrapper from './Wrapper';

//定义高阶组件函数,参数为一个组件
const HOC = (HCompon) => {
   //内部为组件嵌套组件
   return class OutBox extends Component{

      constructor(){
         super()
         this.state={
            name:"张三",
            age:null
         }
      }

      change = ( ) => {
        this.setState({
           age:18,
        })
      }

      render(){
         return (
            <Fragment>
                {/* 通过属性结构解构赋值，内层UI组件继承外层组件的属性，状态及方法 */}
               <HCompon {...this.props} {...this.state} change={this.change}></HCompon>
            </Fragment>
         )
      }
   }
}

//高阶组件的使用，将一个组件作为参数传入，返回一个新的组件
 const HContent = HOC( Content );
 const HWrapper = HOC( Wrapper );


class Container extends Component {
   constructor () {
      super()
      this.state = {
        msg: '今天周五了'
      }
    }

   render (){
      return (
         <Fragment>
            <h3>这里是高阶组件使用</h3>
            <hr/>
             {/* 通过解构将组件数据传给高阶组件外层组件 */}
            <HContent  { ...this.state }></HContent>
            <HWrapper ></HWrapper>
         </Fragment>
      )
   }
}

export default Container;
==============================================================================================

//Wrapper组件
import React ,{ Component,Fragment } from 'react';

class Wrapper extends Component {
   render(){
      return (
         <Fragment>
            <p>这里是wrapper组件 </p>
            <button onClick = {this.props.change} >点击</button>
            <p> name:{this.props.name} <br/>age:{this.props.age} </p>
         </Fragment>
      )
   }
}
export default Wrapper;

==============================================================================================
//Content组件
import React ,{ Component, Fragment} from 'react';

class Content extends Component {
   render(){
      return (
         <Fragment>
            <p>这里是content组件</p>
            <p> {this.props.msg} </p>
         </Fragment>
      )
   }
}
export default Content;

从运行结果可以看出，子组件作为参数传入高阶组件函数，可以继承到外层组件的方法、属性、状态，可以 实现一些属性或是方法的复用。子组件通过this.props实现数据的使用。
在这里插入图片描述
以上均为个人理解

阿喵~~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-react面试题之组件之间的通信方式.zip
03-20
8. **高阶组件(HOC)**：高阶组件是一种函数，接受一个组件并返回一个新的组件，通常用于重用组件逻辑或注入额外的props。例如，`withStyles` HOC用于为组件添加样式，或者`withAuth` HOC用于处理用户认证。 9. **...
详解React中的组件通信问题
12-04
5. **高阶组件(Higher-Order Components, HOC)** HOC是一种复用组件逻辑的技术，它接收一个组件并返回一个新的组件。HOC可以用来注入额外的`props`或者处理跨组件的数据流。 6. **使用`React Redux`或`MobX`进行...
React的高阶组件详解
热门推荐
m0_71485750的博客
10-05 1万+
什么是高阶组件呢?在认识高阶组价之前, 我们先来回顾一下什么是高阶函数?相信很多同学都知道(听说过?)，也用过高阶函数高阶组件和高阶函数它们非常相似的接受一个或多个函数作为参数;返回一个新的函数;JavaScript中比较常见的filter、map、reduce都是高阶函数。那么什么是高阶组件呢?高阶组件的英文是 Higher-Order Components，简称为 HOC;官方的定义: 高阶组件是一个参数为组件，并且返回值为新组件的函数;首先， 高阶组件本身不是一个组件，而是一个函数;
React之高阶组件
astonishqft的博客
09-29 2674
React之高阶组件React之高阶组件前言基本用法属性代理模式`(Props Proxy)`通过ref访问组件实例反向继承`(Inheritance Inversion)`总结 React之高阶组件 前言 高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件 从高阶组件的定义来看，高阶组件并不是一个组件，它就是一个函数，接受一个组件并且返回一个被包装过的新组件。 const...
react中的高阶组件
dongwang的博客
10-16 460
1.高阶组件的作用：实现组件的状态逻辑复用 2.高阶组件的使用步骤： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script
react高阶组件的使用
霜叶的博客
02-22 611
高阶组件 高阶组件：高阶组件是参数为组件，返回值为新组件的函数。 作用：像我们之前用到的react的Form组件和redux的connect函数都是高阶组件，使用高阶组件能够提高代码复用能力 实现一个高阶组件 实现一个高阶组件很容易，只需要简单的几步就好了 import React, { useEffect, useState } from "react"; interface Props{ } function WithComponent(WrappedComponent: React.FC&l
《十》高阶组件
花铛
02-26 935
高阶组件也有其缺点：HOC 需要对原组件进行包裹，如果大量使用 HOC，将会产生非常多的嵌套，会让调试变得困难；而且 HOC 可以劫持 pros，在不遵守约定的情况下可能会造成 props 的冲突。，简称 HOC，就是参数为组件，返回值为新组件的函数。高阶组件对原组件进行了一层拦截，就可以对原组件进行各种增强了。高阶组件并不是 React API 的一部分，而是一种基于 React 的组合特性而形成的设计模式。高阶组件的实现案例：通过高阶组件为自定义组件统一注入用户信息作为其 props。
React进阶学习之组件的解耦之道
08-29
本文将深入探讨React组件解耦的几个关键方法，包括组件的分割、使用props传递元素以及利用高阶组件（HOC）。 首先，我们来看**组件的分割**。当一个组件的`render`函数变得过于庞大时，可以将其拆分为多个子`render...
React组件设计模式之组合组件应用实例分析
10-15
然而，需要注意的是，组合组件并不适用于所有场景，当组件间的交互过于复杂时，可能需要考虑其他设计模式，如高阶组件(HOC)或使用React的Context API来管理状态。 总结来说，React的组合组件模式是解决组件间通信和...
二.React 掌握组件化开发中多种实现技术 高阶组件 - HOC Hooks（>=16.8）
09-03
Hooks是React 16.8引入的新特性，允许在函数组件中使用状态和其他React特性。常见的Hooks包括`useState`（管理状态）、`useEffect`（处理副作用）和`useContext`（订阅Context）。 ```jsx import React, { ...
理解react中的高阶组件和高阶函数
IT_10的博客
08-29 2145
高阶组件 ES6中使用关键字class来使它的语法有和 类 相似的写法和功能，但是它的本质还是一个函数。 因此，高阶组件本质上是一个函数，只是这种组件（函数）接收一个组件，返回一个新的组件。 比如下面这个Login组件，在该组件中使用了Form组件，由于需要用到form对象的getFieldDecorator 方法，因此Login组件中通过this.props要能访问到form对象，使用Form....
React 高阶组件浅析
weixin_33739523的博客
08-26 214
背景 高阶组件的这种写法的诞生来自于社区的实践，目的是解决一些交叉问题(Cross-Cutting Concerns)。而最早时候 React 官方给出的解决方案是使用 mixin 。而 React 也在官网中写道： We previously recommended mixins as a way to handle cross-cut...
react组件通信方式汇总
ebonyzhang
01-09 1万+
父组件向子组件通信 父组件更新组件状态，通过props传递给子组件，子组件得到后进行更新。 Timer 是倒计时子组件，集成在了OrderPay父组件里，父组件向子组件传订单数据参数order对象。如下代码： &amp;amp;amp;lt;Timer order={order} /&amp;amp;amp;gt; //倒计时组件 在子组件里直接通过props获取父组件传递过来的参数，如下： let order = this.props.or...
《深入浅出React和Redux》(3) - Export & Import, 高阶组件
zhixin9001的博客
02-19 154
Export & Import export可以导出函数、class等，有两种导出方式： 默认导出（default export） 命名导出（named export） 默认导出（default export） default export不需要指定名称，但每个文件中只能有一个default export // 导出纯值或表达式结果 export default 1; const a = 1； export default a; // 导出函数 export default function(
深入理解React 高阶组件
weixin_33686714的博客
10-21 472
React 中的五种组件形式目前的前端开发主流技术都已经往组件化方向发展了，而每学一种新的框架的时候，最基础的部分一定是学习其组件的编写方式。这就好像学习一门新的编程语言的时候，总是要从hello world开始一样。而在React中，我们常用的组件编写方式又有哪些呢？或者说各种不同的组件又可以分为几类呢？无状态组件无状态组件(Stateless Component)是最基础的组件形式，由于没有状...
react父调用被高阶组件包裹的组件的方法
【03】的博客
03-27 888
具体而言，高阶组件是参数为组件，返回值为新组件的函数 https://react.docschina.org/docs/higher-order-components.html 这是一个最简易的类高阶组件 Test2.jsx（父组件） import React, {Component} from 'react'; import Child from './child' class Test2 extends Component { render() { return (
React Context和高阶组件HOC用法
Chef_Front的博客
04-25 1520
前言 本文将通过官方实例，组合运用Context和高阶组件，并给出实例代码的方式详细介绍Context、高阶组件的概念和用法。 Context 在典型的React应用中，数据是通过props属性一层层的由上向下传递。但是对于应用中很多组件都需要使用的值（比如说：页面的主题，页面语言选择），如果还是通过props属性一层层的传递下来，会非常繁琐。 Context通过组件树提供了一种传...
深入理解 React 高阶组件
qq_22889599的博客
05-18 1123
摘要这篇文章主要面向想要使用 HOC（Higher Order Component，高阶组件） 模式的进阶开发者。如果你是 React 新手，建议你从阅读 React 的文档开始。高阶组件是一种很好的模式，很多 React 库已经证明了其价值。这篇文章中我们将会详细的讲解什么是 HOC，你能用它做什么，它有哪些局限，如何实现它。什么是高阶组件？高阶组件就是一个 React 组件包裹着另外一个 Re...
10种React组件之间通信的方法
web前端开发
11-13 5866
来源 |https://segmentfault.com/a/1190000023585646这两天被临时抽调到别的项目组去做一个小项目的迭代。这个项目前端是用React，只是个小型项...
react组件怎么设计
最新发布
06-03
4. 高阶组件：使用高阶组件来复用组件逻辑，将通用的功能封装在高阶组件中，然后将其传递给其他组件。 5. 无状态组件：尽可能使用无状态组件来实现简单的UI组件，因为它们比有状态组件更容易测试、维护和复用。 6....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值