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

React 自定义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 (
//     <div>
//       {x}  ====  {y}
//     </div>
//   )
// }
 
// 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 (
        <HandleChange xy = {xy} />
      )
    }
  }
}
 
export default HandleChange
 
在页面里使用：
 
// import HandleChange from '@@/HandleChange'
// export class Pop extends Component {
//   render() {
//     const { xy } =this.props
//     return (
//       <div>
//         鼠标的坐标：{xy.x} - {xy.y}
//       </div>
//     )
//   }
// }
 
// export default HandleChange(Pop)