React高阶组件的使用浅析
在学习高阶组件前,首先我们了解一下高阶函数
高阶函数
把一个函数作为另一个函数的参数,那么这个函数就是高阶函数
高阶组件
一个组件的参数是组件,并且返回值是一个组件,我们称这类组件为高阶组件
react常见的高阶函数
withRouter()
memo()
react-redux中connect
高阶组件形式
React中的高阶组件主要有两种形式:属性代理和反向继承
属性代理:一个函数接收一个WrappedComponent组件作为参数传入,并返回一个继承React.Component组件的类,且在该类的render()方法中返回被传入的WrappedComponent组件
反向继承:是一个函数接收一个WrappedComponent组件作为参数传入,并返回一个继承了该传入的WrappedComponent组件的类,且在该类的render()方法中返回super.render()方法
注意:反向继承必须使用类组件,因为函数组件没有this指向
属性继承方式的代码
function Goods(props) { console.log(props); return ( <div className="box1"> <h3 style={{color:props.color}}>Hello Js</h3> </div> ) } //高阶组件的代码, 属性代理的方式 function Color(WrapperComponent){ return class Color extends React.Component{ render(){ console.log(this.props) let obj = {color:"#0088dd"} return ( <WrapperComponent {...this.props} {...obj}/> ) } } } export default Color(Goods);
高阶组件我们也可以把他进行单独的剥离出来,然后把他在各个组件中使用
HOC.js文件
import React from 'react'; //高阶组件的代码, 属性代理的方式 export default function Mouse(WrapperComponent){ return class Mouse extends React.Component{ constructor(props){ super(props); this.state = { x:0, y:0, } this.getMouse(); } getMouse = ()=>{ document.addEventListener("mousemove",(event)=>{ this.setState({ x:event.clientX, y:event.clientY }) }) } render() { // console.log(this.state); return ( <WrapperComponent {...this.props} {...this.state}/> ) } } }
goods.js文件
import Mouse from "../context/HOC"; function Goods(props) { console.log(props); let {x,y} = props; return ( <div className="box1"> <div> 鼠标坐标:x:{x},y:{y} </div> <h3 >Hello Js</h3> </div> ) } export default Mouse(Goods);
到此这篇关于React高阶组件的使用浅析的文章就介绍到这了,更多相关React高阶组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
React Native自定义Android的SSL证书链校验
这篇文章主要为大家介绍了React Native自定义Android的SSL证书链校验示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-10-10React render核心阶段深入探究穿插scheduler与reconciler
这篇文章主要介绍了React render核心阶段穿插scheduler与reconciler,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧2022-11-11使用react-beautiful-dnd实现列表间拖拽踩坑
相比于react-dnd,react-beautiful-dnd更适用于列表之间拖拽的场景,本文主要介绍了使用react-beautiful-dnd实现列表间拖拽踩坑,感兴趣的可以了解一下2021-05-05react echarts tree树图搜索展开功能示例详解
这篇文章主要为大家介绍了react echarts tree树图搜索展开功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-01-01React Native基础入门之初步使用Flexbox布局
React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案,下面这篇文章主要给大家介绍了关于React Native基础入门之初步使用Flexbox布局的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2018-07-07
最新评论