由于强大的mixin功能,在react组件开发过程中存在众多不理于组件维护的因素,所以react社区提出了新的方法来替换mixin,那就是高阶组件;

首先在工程中安装高阶组件所需的依赖:

npm install @babel/plugin-proposal-decorators

然后输入命令npm eject,接着在工程中找到webpack.config.js,找到下图中的位置:

//在plugins数组里添加下面这个元素,保存即可
['@babel/plugin-proposal-decorators', { "legacy": true }],

配置好之后:创建两个组件:(MyContainer:高阶组件)、(MyComponent:普通组件)

高阶组件:MyContainer/index.js

// 高阶组件 myContainer
import React,{Component} from 'react'; const MyContainer =(WrappedComponent)=>{
return class extends Component{
constructor(props){
super(props);
this.state={
name:'',
};
this.onNameChange=this.onNameChange.bind(this); }
onNameChange(event){
console.log(event.target.value);
this.setState({
name:event.target.value,
})
}
render(){
const newProps={
name:{
value:this.state.name,
onChange:this.onNameChange
}
}
return <WrappedComponent {...this.props} {...newProps}></WrappedComponent>
}
}
}
export default MyContainer;

普通组件:MyComponent/index.js

//需要用高阶组件中的peops的组件
import React,{Component} from 'react';
import MyContainer from '../Mycontainer/index'; @MyContainer
class MyComponent extends Component{
componentDidMount=()=>{
console.log(this.props)
}
render(){
return <input name="MyComponent" {...this.props.name} onChange={this.props.name.onChange}></input>
}
}
export default MyComponent;

到这里,MyComponent组件就可以使用高阶组件里面的公共属性和方法了,提高了代码的复用性;

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. 理解HTTP协议中的multipart/form-data

    前提 之前在写一个通用HTTP组件的时候遇到过媒体(Media)类型multipart/form-data的封装问题,这篇文章主要简单介绍一下HTTP协议中媒体类型multipart/form-dat ...

  2. 前端性能和加载体验优化实践(附:PWA、离线包、内存优化、预渲染)

    一.背景:页面为何会卡? 1.1 等待时间长(性能) 项目本身包/第三方脚本比较大. JavaScript 执行阻塞页面加载. 图片体积大且多. 特别是对于首屏资源加载中的白屏时间,用户等待的时间就越 ...

  3. 第九届河南理工大学算法程序设计大赛 正式赛L:最优规划(最小生成树)

    单测试点时限: 1.0 秒 内存限制: 512 MB 有很多城市之间已经建立了路径,但是有些城市之间没有路径联通.为了联通所有的城市,现在需要添加一些路径,为了节约,需要满足添加总路径是最短的. 输入 ...

  4. 剖析Defi之Uinswap_2

    学习核心合约UniswapV2Pair,在父合约UniswapV2ERC20的基础上增加资产交易及流动性提供等功能. 交易对合约本身是erc20合约,代币表示流动性,代币在提供流动性的地址里,当提供流 ...

  5. 【MySQL作业】SELECT 数据查询——美和易思定制显示查询结果应用习题

    点击打开所使用到的数据库>>> 1.分类显示所有商品信息,按商品价格升序排列. "分类显示所有商品信息"表明查询表"商品",排序列为" ...

  6. HDU ACM 8.13 T2 的 O(m)做法

    前言 由于本人比较拉所以看起来很啰嗦,将就看就好. 题目大意 \(n\)种包,每个包里面有一大一小两个球,选小球的代价是\(1\),大球的代价是\(2\),可以都不选,若一次性买两个包,则可以优惠\( ...

  7. 初识python: 递归函数

    定义: 在函数内,可以调用其他函数,如果一个函数在内部调用自己,返回值中包含函数名,这个函数就是递归函数. 特性: 1.必须要有明确的结束条件: 2.每进入更深一层递归时,问题规模相对上次递归都应该有 ...

  8. VM和CentOS7安装教程

    如果图片损坏,点击链接:https://www.toutiao.com/i6491076101664670222/ 安装软件 VMware_workstation_full_12.5.2 CentOS ...

  9. 【Java】Eclipse常用快捷键

    Eclipse常用快捷键 * 1.补全代码的声明:alt + / * 2.快速修复: ctrl + 1 * 3.批量导包:ctrl + shift + o * 4.使用单行注释:ctrl + / * ...

  10. 【Android UI设计与开发】8.顶部标题栏(一)ActionBar 奥义·详解

    一.ActionBar介绍 在Android 3.0中除了我们重点讲解的Fragment外,Action Bar也是一个非常重要的交互元素,Action Bar取代了传统的tittle bar和men ...