高阶组件 ----- 自定义hook 两种实现

自定义hook 的实现 必须是use开头

实例如下：
自定义组件：

import React,{ useEffect, useState} from ‘react’

function Reuse() {
const [xy,setXy] = useState({ x:0, y:0})
const one = (e) => {
setXy({
x:e.clientX,
y:e.clientY
})
}
useEffect( () => {
document.addEventListener(‘mousemove’, one)
return () => {
document.removeEventListener(‘mousemove’, one)
}
},[])
return xy
}

export default Reuse

在页面里写：（使用自定义hook）

// import React, { Component } from ‘react’
// import useReuse from ‘@@/Reuse’
// function Pop(props) {
// const { x, y } = useReuse()
// return (
//

// {x} ==== {y}
//

// )
// }

// export default Pop

高阶组件就是 函数接收一个组件 并且最终返回一个组件

代码：

定义组件：
import React from ‘react’

function HandleChange(HandleChange) {
return class extends React.Component {
state = {
xy:{
x:0,
y:0,
}
}
componentDidMount () {
document.addEventListener(‘mousemove’, evt => {
this.setState({
xy:{
x:evt.clientX,
y:evt.clientY
}
})
})
}
render () {
const { xy } =this.state
return (

)
}
}
}

export default HandleChange

在页面里使用：

// import HandleChange from ‘@@/HandleChange’
// export class Pop extends Component {
// render() {
// const { xy } =this.props
// return (
//

// 鼠标的坐标：{xy.x} - {xy.y}
//

// )
// }
// }

// export default HandleChange(Pop)