大家好,欢迎来到IT知识分享网。
目录
在学习高阶组件前,首先我们了解一下高阶函数
高阶函数?
把一个函数作为另一个函数的参数,那么这个函数就是高阶函数
高阶组件?
一个组件的参数是组件,并且返回值是一个组件,我们称这类组件为高阶组件
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);
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/16025.html