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 =>{
// <img
// 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'))
不知道为什么在浏览器无法显示效果,但也没有报错!!