react 高阶组件

缺乏、安全感 2022-03-26 12:22 350阅读 0赞

高阶函数基本概念

1.函数可以作为参数被传递

  1. setTimeout(()=>{
  2.    console.log(0)
  3. },1000)

2.函数可以作为返回值输出

  1. function foo(x){
  2.    return function(){
  3.          return x;
  4.    }
  5. }

高级组件的基本概念

1.高阶组件就是接受一个组件作为参数并返回一个新组件的函数

2.高阶组件是一个函数，并不是一个组价

编写高阶组件

1.实现一个普通组件

2.将普通组件使用函数包裹

使用高阶组件

1.higherOrderComponent(WrappedComponent);

  1. @higherOrderComponent

高阶组件的应用

代理方式的高阶组件

返回的新组件类直接继承自React.Component类，新组件扮演的角色传入参数组件的一个代理，在新组件的render函数中，将别包裹组件渲染出来，除了高阶组件自己要做的工作，其余功能全部转手给了被包裹的组件。

继承方式的高阶组件

采用继承关联作为参数的数组和返回的组件，假如传入的组件参数是WrappedComponent，那么返回的组件就直接继承自WrappedComponent

发表评论

表情：
评论列表 （有 0 条评论，350人围观）

还没有评论，来说两句吧...

相关阅读

    相关 React-高阶组件

    高阶组件是 React 中复用组件逻辑的一种技巧，高阶组件是一个函数，接收需要包装的组件，返回值为增强后的组件。 实现思路： 高阶组件内部创建一个类组件，在这个类组件中去提

    骑猪看日落骑猪看日落/ 0 赞/ 114 阅读

    相关 React—HOC 高阶组件

    基本概念 对组件中可以被重复使用的内容进行封装 什么是高阶组件 `高阶组件是一个函数`，接收是一个组件，返回值也是一个组件，这类组件我么叫做高阶组件（HOC）；高

    Love The Way You LieLove The Way You Lie/ 0 赞/ 710 阅读

    相关 React高阶组件

    高阶组件（HOC）是React里的高级技术为了应对重用组件的逻辑，HOC本质上不是React API的一部分。他是从React的组合性质中显露出来的模式 具体来说，一个高阶

    Dear 丶Dear 丶/ 0 赞/ 308 阅读

    相关 react 高阶组件

    高阶组件必须是一个函数,且必须返回一个组件，参数也必须接收一个组件 作用:能对传入的组件进行一些限定操作,可以使用生命周期等 ![在这里插入图片描述

    你的名字你的名字/ 0 赞/ 577 阅读