React高阶组件的使用浅析.docx

第

React高阶组件的使用浅析

目录高阶函数高阶组件react常见的高阶函数高阶组件形式在学习高阶组件前，首先我们了解一下高阶函数

高阶函数

把一个函数作为另一个函数的参数，那么这个函数就是高阶函数

高阶组件

一个组件的参数是组件，并且返回值是一个组件，我们称这类组件为高阶组件

react常见的高阶函数

withRouter（）

memo（）

react-redux中connect

高阶组件形式

React中的高阶组件主要有两种形式：属性代理和反向继承

属性代理：一个函数接收一个WrappedComponent组件作为参数传入，并返回一个继承React.Component组件的类，且在该类的render（）方法中返回被传入的WrappedComponent组件

反向继承：是一个函数接收一个WrappedComponent组件作为参数传入，并返回一个继承了该传入的WrappedComponent组件的类，且在该类的render（）方法中返回super.render()方法

注意：反向继承必须使用类组件，因为函数组件没有this指向

属性继承方式的代码

functionGoods(props){

console.log(props);

return(

divclassName=box1

h3#0088dd}

return(

WrapperComponent{...ps}{...obj}/

exportdefaultColor(Goods);

高阶组件我们也可以把他进行单独的剥离出来，然后把他在各个组件中使用

HOC.js文件

importReactfromreact;

//高阶组件的代码，属性代理的方式

exportdefaultfunctionMouse(WrapperComponent){

returnclassMouseextendsReact.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{...ps}{...this.state}/

}

goods.js文件

importMousefrom../context/HOC;

functionGoods(props){

console.log(props);

let{x,y}=props;

return(

divclassName=box1

div

鼠标坐标:x:{x},y:{y}

/div

h3HelloJs/h3

/div

exportdefaultMouse(Goods);