HOC高阶组件
功能:组件复用
相似参考点:类似于JavaScript中的高阶函数。二者都是将函数作为参数,在内部进行加工返回后再使用,具有接收和返回其他函数(类)的附加能力,可以把它们想象成游戏当中的”附魔“。
案例:新建一个子组件A,该子组件移动鼠标能获取相应的坐标值。
关键点:在于render。
在rcc类外嵌套一个函数作为构造函数,参可以把这个函数想象为一个二次加工的工厂,参数为需要加工的组件。这里的参数名为;Wcomponent。render返回的就是一个组件,将工厂组件A的state结构赋值给加工组件。加工完成后的组件就能复用工厂组件内的处理好的值了。
A组件
import React, { Component } from 'react'
//Wcomponent 为需加工(附魔)的简单组件,作为参数进行传递。
export default function withCom(Wcomponent){
class Mouse extends Component {
constructor(){
super()
this.state={
x:0,
y:0
}
}
//解构赋值给简单组件,在简单中用props进行调用
render() {
return <Wcomponent {...this.state}></Wcomponent>
}
componentDidMount(){
window.addEventListener("mousemove",this.mouseMoveHandler)
}
mouseMoveHandler=(e)=>{
this.setState({
x:e.clientX,
y:e.clientY
})
}
}
return Mouse
}
父组件及待加工组件
import React, { Component } from 'react'
import './App.css';
import Mouse from "../src/component/mousemove/index"
//待加工组件
function Position(props) {
return (
<div>
<p>{props.x} </p>
</div>
)
}
// 完成组件的加工
const MousePosition = Mouse(Position)
export default class App extends Component {
render() {
return (
<div>
{/* 组件加工完成后进行一个挂载 */}
<MousePosition></MousePosition>
</div>
)
}
}
props存储从工厂组件中获取到的state数据。