React高阶组件的使用浅析，能否深入剖析其背后的设计哲学与实际应用技巧？

本文共计652个文字，预计阅读时间需要3分钟。

目录 + 高阶函数 + 高阶组件 + 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高阶组件内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！