react hook - 技术栈

当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。
必须以"use"开头吗？必须如此。这个约定非常重要。不遵循的话，由于无法判断某个函数是否包含对其内部 Hook
的调用，React 将无法自动检查你的 Hook 是否违反了 Hook 的规则
小练习
　　使用自定义hooks实现鼠标移动位置

复制代码

import React, { useState, useEffect } from "react"
import icon from "../../assect/icon.png"
const usePosition = () => {
 const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
 const MouseMove = (e) => {
  setMousePosition({ x: e.pageX, y: e.pageY })
 }
 useEffect(() => {
  window.addEventListener('mousemove', MouseMove)
  return (window.addEventListener('mousemove', MouseMove))
 }, [])
 return mousePosition
}
const Assembly1 = () => {
 const { x, y } = usePosition()
 return (
  <div>{x}{y}</div>
 )
}
const Assembly = () => {
 const { x, y } = usePosition()
 return (
  <div>
   位置{x}---{y}
   <img src={icon} width={'50px'} height={'50px'} style={{ position: "absolute", top: y, left: x }} />
  </div>
 )
}
export default Assembly

高阶组件
高阶组件简称（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。
高阶组件是参数为组件，返回值为新组件的函数
小练习
　　使用高阶组件实现鼠标移动位置

复制代码

import React from "react"
import icon from "../../assect/icon.png"
function withHOC(Section) {//高阶组件
  return class extends React.Component {
  state = {
   x: 0, y: 0
  }
  mouseChange = (e) => {//鼠标事件
   const { pageX, pageY } = e
   this.setState({
    x: pageX,
    y: pageY
   })
  }
  componentDidMount=()=>{
   window.addEventListener("mousemove", this.mouseChange)
  }
  componentWillUnmount = () => {
   window.addEventListener("mousemove", this.mouseChange)
  }
  render() {
   return (
    <div>
       <Section {...this.state}></Section>
    </div>
   )
  }
 }
}
const ClassSection=(props)=>{//
const {x,y}=props
return (
 <div>{x}{y}</div>
)
}
const Section = (props)=>{//鼠标移动图片随之移动
 const {x,y}=props
 return (
  <div>
   {x},{y}
   <img src={icon} width={'50px'} height={'50px'} style={{position:'absolute',top:y,left:x}} />
  </div>
 )
}
const ExportComponents = withHOC(Section)
export default ExportComponents

render props组件
　"render prop" 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术
具有 render prop 的组件接收一个返回 React 元素的函数，并在组件内部通过调用此函数来实现自己的渲染逻辑。
小练习
　　使用render props组件实现鼠标移动位置

复制代码

import React from "react";
import icon from "../../assect/icon.png"
class Event extends React.Component {
 state = {
  x: 0,
  y: 0
 }
 event = (e) => {
  this.setState({
   x: e.pageX,
   y: e.pageY
  })
 }
 componentDidMount = () => {
  window.addEventListener("mousemove", this.event)
 }
 componentWillUnmount = () => {
  window.addEventListener("mousemove", this.event)
 }
 render() {
  return (
   <div>{this.props.custom(this.state)}</div>
  )
 }
}
const accept = () => {
 return (
  <Event custom={({ x, y }) => (
   <div>
    <p>{x},{y}</p>
    <img src={icon} width={'50px'} height={'50px'} style={{ position: 'absolute', top: y, left: x }} />
   </div>
  )}></Event>
 )
}
export default accept

总结：
React自定义hooks、高阶组件和render prop都是用于实现代码复用的方式，它们各有不同的特点和适用场景。自定义hooks适用于封装可复用的逻辑，高阶组件适用于增强原始组件的功能，而render prop则提供了一种灵活的方式来共享逻辑。选择使用哪种方式取决于具体的需求和场景。