React之高阶组件

1.概述：

• 目的：实现状态逻辑复用
• 采用包装（装饰）模式，比如说手机壳
• 手机：获取保护功能
• 手机壳：提供保护功能
• 高阶组件就相当于手机壳，通过包装组件，增强组件功能

2.思路分析：

• 高阶组件（HOC，Higher-Order Component）是一个函数，接收要包装的组件，返回增强后的组件
• 高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，通过props将复用的状态传递给被包装组件WrappedComponent

 3.使用步骤

• 创建一个函数，名称约定为以with开头
• 指定函数参数，参数应该为以大写字母开头（作为要渲染的组件）
• 在函数内部创建一个类组件，提供复用的状态代码逻辑，并返回
• 在该组件中，渲染参数组件时，同时将状态通过props传递给参数组件
• 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中

import React from 'react';
import ReactDOM from 'react-dom';
import MyEditor from './components/MyEditor';
 
//React脚手架引入图片的方式
// import img from './images/open.png'
 
// 创建高阶组件
function withMouse (WrappedComponent){
  //该组件提供复用的状态代码逻辑
  class Mouse extends React.Component{
    state={
      x:0,
      y:0
    }
  
  
    handleMouseMouve= e=>{
      this.setState({
        x:e.clientX,
        y:e.clientY,
      })
    }
   
    //监听鼠标移动事件
    componentDidMount(){
      window.addEventListener('mousemove',this.handleMouseMouve)
      console.log('listener')
      console.log(this.state.x)
      console.log(this.state.y)
    }
  
    //解除绑定
    componentWillUnmount(){
      window.removeEventListener('mousemove',this.handleMouseMouve)
    }
 
    render(){
      return (
        <WrappedComponent {...this.state}/>
      )
      
    }
 
  }
  return Mouse
}
 
//用来测试高阶组件
const Position = props => {
  <p>
    X:{props.x} y:{props.y}
  p>
}
 
// const Open = props =>{
//   
//   src={img}
//   alt='open'
//   style={{
//     position:'absolute',
//     top:props.y,
//     left:props.x
//   }}
//   />
// }
 
 
//获取增强后的组件：
const MousePosition = withMouse(Position)
 
// const OpenPosition = withMouse(Open)
 
class App extends React.Component{
  render(){
    return(
      <div>
        <h1>高阶组件h1>
        <MousePosition/>
        {/* <OpenPosition>OpenPosition> */}
      div>
    )
  }
}
 
ReactDOM.render(<App/>,
 
document.getElementById('root'))

 不知道为什么在浏览器无法显示效果，但也没有报错！！