一、什么是高阶组件
高阶组件( Higher-Order Component,HOC )是一个以组件作为参数
,返回一个新组件
的函数
。
- 高阶组件最大的特点就是
复用组件逻辑
- 高阶组件本身并不是 React 的 API,而是React组件的一种设计模式,一种组件重用的
高级技巧
- 高阶组件是一个
函数
,接收要包装的组件,返回增强后的组件
二、如何实现一个高阶组件
高阶组件内部创建一个组件,在这个组件中提供复用的状态逻辑
代码,通过props
将复用状态传递给被包装组件 WrappedComponent
文章来源:https://www.toymoban.com/news/detail-728297.html
- 创建一个函数,命名
以 with 开头
- 指定函数参数,参数为组件,所以参数应该以大写字母开头
- 在函数内部创建一个组件,提供复用的状态逻辑代码,并返回
- 在该组件中,渲染参数组件,同时将状态通过props传递给参数组件
- 调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中
function withMouse(WrappedComponent) {
class Mouse extends React.Component {
state = {
x: 0,
y: 0,
}
render() {
return (
<WrappedComponent {...this.state}></WrappedComponent>
)
}
}
return Mouse
}
const Position = props => (
<div>
鼠标位置: {props.x}, {props.y}
</div>
)
const MousePosition = withMouse(Position)
<MousePosition />
三、高阶组件demo
- 代码
import React from 'react'
/**
* 高阶组件
*/
// 获取组件名
// function getDisplayName(WrappedComponent) {
// return WrappedComponent.displayName || WrappedComponent.name || 'Component'
// }
// 创建高阶组件
function withMouse(WrappedComponent) {
// 该组件提供复用的状态逻辑
class Mouse extends React.Component {
// 初始化state
state = {
x: 0,
y: 0,
}
// 渲染UI,可以将state和props 一起传递给组件
render() {
return (
<WrappedComponent {...this.state} {...this.props}></WrappedComponent>
)
}
// 组件挂载,监听鼠标移动
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
// 组件卸载,移除监听
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}
// 鼠标移动事件处理程序
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY,
})
}
}
// 设置displayName 这个为了调试区分用,可以不设置
// Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`
// 返回增强后的组件
return Mouse
}
// 位置组件,用来测试高阶组件
const Position = props => (
<div>
<h2>
鼠标位置: {props.x}, {props.y}
</h2>
MousePosition组件: 接收的参数 a == {props.a}
</div>
)
// 猫抓老鼠组件,用来测试高阶组件
const Cat = props => (
<div>
<img
src={require('../../assets/images/cat.png')}
alt="猫"
height="22px"
style={{
position: 'absolute',
top: props.y - 10,
left: props.x - 10,
}}
/>
MouseCat组件: 接收的参数 a == {props.a}
</div>
)
// 获取增强后的组件
const MousePosition = withMouse(Position)
const MouseCat = withMouse(Cat)
// 使用
class MouseHigher extends React.Component {
// 渲染增强后的组件
render() {
return (
<div>
<MousePosition a="111"></MousePosition>
<MouseCat a="222"></MouseCat>
</div>
)
}
}
export default MouseHigher
- 效果
文章来源地址https://www.toymoban.com/news/detail-728297.html
到了这里,关于react-高阶组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!