React高阶组件的使用浅析
作者：是张鱼小丸子鸭
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享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高阶组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！