1、高阶组件:封装
高阶组件使用得是react得一种模式,增强现有组件得功能
一个高阶组件就是一个函数,这个函数接收得是组件类作为参数得,并且返回得是一个新组件,再返回得新组件中有输入参数组件不具备得功能(以上提到得所有得组件都不是组件得实例,是类,输入得这个组件也可以是无状态组件函数)
2、高阶组件意义:
重用代码
可以修改现有组件得行为
3、实现高阶组件得方式:代理式的高阶组件、继承式的高阶组件
4、代理式得高阶组件--属性代理
5、继承式的高阶组件--反向继承来实现得
6、高阶组件缺点:
静态方法会丢失:
因为原始组件时被包裹再新组件中得,新组件没有原始组件得任何静态方法
refs属性不能传递:
高阶组件可以传递所有得props给包裹得组件Com,但是有一个属性不行,ref,如果我们给高阶组件创建得组件添加ref得话,ref指向的时最外城的容器组件,不是包裹的Com组件解决方法使用react中提供的React.forwardRef来获取
反向继承不能保证完整得子组件被解析:
组件分为class类组件和function函数组件
如果渲染的时候包含function组件的话那么就不能操作组件的子组件了
7、高阶组件可以带给我们很大方便,规则:
props保持一致:
再使用高解组件的时候返回的组件要尽量保持和原组件的props一致
不能再函数组件上使用ref属性,因为函数组件没有办法进行实例
不要以任何方式改变原始组件(第三方组件)
不要再render方法中再使用高阶组件了
在使用传值的时候要把不相关的props进行包裹起来
包裹组件显示名字以便测试

import React, { Component } from 'react'

import ReactDom from 'react-dom' ;

class Hello extends Component{
render(){
return(
<div>
我是hello组件
姓名:{this.props.name}
</div>
)
}
}
// const testHellow =( Com) =>{ //prop 代理高阶组件
// return class extends Component{
// // constructor(props){
// // super(props)
// // this.setState={
// // sex="男",
// // hobby:"篮球"
// // }
// // } // render(){
// return(
// <div>
// <Com {...this.props}/>
// </div>
// )
// }
// }
// } const testHellow =( Com) =>{ //继承高阶组件
return class extends Com{ render(){
return(
<div>
新的
{super.render()}
</div>
)
}
}
} let Test=testHellow(Hello) class Gao extends Component {
render() {
return ( <Test name="tzb"/> )
}
}
ReactDom.render(
<Gao/>,
document.getElementById("root")
)

8、react 高阶组件的更多相关文章

  1. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  2. 当初要是看了这篇,React高阶组件早会了

    当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...

  3. react高阶组件的理解

    [高阶组件和函数式编程] function hello() { console.log('hello jason'); } function WrapperHello(fn) { return fun ...

  4. 函数式编程与React高阶组件

    相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...

  5. React高阶组件学习笔记

    高阶函数的基本概念: 函数可以作为参数被传递,函数可以作为函数值输出. 高阶组件基本概念: 高阶组件就说接受一个组件作为参数,并返回一个新组件的函数. 为什么需要高阶组件 多个组件都需要某个相同的功能 ...

  6. 利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...

  7. react高阶组件的一些运用

    今天学习了react高阶组件,刚接触react学习起来还是比较困难,和大家分享一下今天学习的知识吧,另外缺少的地方欢迎补充哈哈 高阶组件(Higher Order Components,简称:HOC) ...

  8. React——高阶组件

    1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件. ...

  9. react 高阶组件的 理解和应用

    高阶组件是什么东西 简单的理解是:一个包装了另一个基础组件的组件.(相对高阶组件来说,我习惯把被包装的组件称为基础组件) 注意:这里说的是包装,可以理解成包裹和组装: 具体的是高阶组件的两种形式吧: ...

  10. react高阶组件的使用

    为了提高代码的复用在react中我们可以使用高阶组件 1.添加高阶组件 高阶组件主要代码模板HOC.js export default (WrappedComponent) => { retur ...

随机推荐

  1. Puppeteer笔记(一):Puppeteer简介

    一.Puppeteer简介 Puppeteer是NPM库,它提供了NodeJS高级API来控制Chrome.Puppeteer 默认以无头(无界面)方式运行,但也可以配置为运行有界面的Chrome. ...

  2. Spring + Struts + Hibernate 简单封装通用接口

    1.BaseDao public interface BaseDao<T> { /** * 获取符合条件的记录数 * @param filter * @param sortName * @ ...

  3. Java集合类: Set、List、Map

    Set.List.Map都是集合接口   set --其中的值不允许重复,无序的数据结构   list   --其中的值允许重复,因为其为有序的数据结构   map--成对的数据结构,健值必须具有唯一 ...

  4. LibreOJ #515 贪心只能过样例

    题目链接:https://loj.ac/problem/515 知识点: DP.bitset类 解题思路: DP部分不难想到:从 a 到 b 遍历,然后在已有的状态上加上遍历得到的数字的平方,难点在于 ...

  5. 4、Servlet中的Cookie 用于存储 web 页面的用户信息。

    Servlet Cookie 处理 Cookie 是存储在客户端计算机上的文本文件,并保留了各种跟踪信息.Java Servlet 显然支持 HTTP Cookie. 识别返回用户包括三个步骤: 服务 ...

  6. Verilog代码和FPGA硬件的映射关系(四)

    其实在FPGA的开发中理想情况下FPGA之间的数据要通过寄存器输入.输出,这样才能使得延时最小,从而更容易满足建立时间要求.我们在FPGA内部硬件结构中得知,IOB内是有寄存器的,且IOB内的寄存器比 ...

  7. PHP相关_几个操作记录下

    1.JSON转换 var cloneTesttaskList = <?php echo json_encode(json_encode($cloneTesttaskList));?>; v ...

  8. [JavaWeb基础] 032.第三方插件pinyin4j的使用

    突然发现了一个比较新奇的插件,就是可以把我们输入的汉字,输出它所有的拼音的jar包.下面以代码的形式简单的介绍下这个插件 package com.babybus.sdteam.pinyin4j; im ...

  9. [CSS工具推荐]0001.推荐 10 个超棒的 CSS3 代码生成工具

    引言:新的在线工具和 WebApp 帮助开发者快速地创建网站而不用写代码.前端开发已经在框架和代码库方面有了很大的进展. 现在许多开发者已经忘记了代码生成器在构建网站时的价值.下面的资源是完全免费的 ...

  10. [工具推荐]_iOS音频批量转换

    通常为了便于市场推广和获得更高的下载量,产品安装包的体积是越小越好.那么问题来了,要如何才能做到使安装包的体积最小化呢.根据产品的组成成分,最终可以大概分为,代码,图片,视频,音频等这几部分,今天我们 ...