什么是高阶组件
高阶组件是包装了另一个React组件的React组件
怎么理解高阶组件
可以简单将其理解成 “类工厂”
将一些可复用的逻辑写在高阶组件中,把一个普通组件传入高阶组件,通过返回值的形式,将处理好的组件return出来
即:高阶组件为一个函数,接收一个组件作为参数,并且返回值为一个新组件
function HOC (OneComponent) {
return class NewComponent extends Component {
render() {
return <OneComponent {...this.props} />
}
}
}
高阶组件的目的
将可复用的逻辑进行组件化封装,更好的将逻辑与 UI 分离
让我们在增强原有组件的功能的同时,不破坏组件原有的特性
// 通过高阶组件给基础组件添加新属性
function HOC (OneComponent) {
return class NewComponent extends Component {
const newProps = {
id: 1,
name: '张三'
}
render() {
return <OneComponent {...this.props} {...newProps} />
}
}
}
// 可以在 OneComponent 中,通过this.props.id/this.props.name去获取新添加的属性
// 通过高阶组件给基础组件添加新方法
function HOC (OneComponent) {
return class NewComponent extends Component {
constructor(props) {
super(props)
this.state = {
count: 0 // 定义一个私有属性
}
}
const add = () => {
this.setState({
count: this.state.count + 1
})
}
const newProps = {
num: this.state.count,
add: () => this.add()
}
render() {
return <OneComponent {...this.props} {...newProps}/>
}
}
}
// 通过HOC这个高阶组件,给基础组件添加了一个'num'属性和'add'这个方法
demo
场景:
简单计数器:在页面记录总数,给出两个按钮,一个控制总数加,一个控制总数减
方案一:
通过高阶组件的形式实现
// 主函数
// 这里直接解构props
const Main = ({count, add, minus}) => {
return (
<div>
<p>当前总数{count}</p>
<button onClick={() => add()}>加</button>
<button onClick={() => minus()}>减</button>
</div>
)
}
export default HOC(Main)
// 高阶组件函数
const HOC = (OneComponent) => {
return class NewComponent extends Component {
constructor(props) {
super(props)
this.state = {
count: 0 // 总数
}
// 点击事件:总数加一
const add = () => {
this.setState({
count: this.state.count + 1
})
}
// 点击事件:总数减一
const minus = () => {
this.setState({
count: this.state.count - 1
})
}
render() {
// 通过props的方式传出
return <OneComponent
{...this.props}
count={this.state.count}
add={() => this.add()}
minus={() => this.minus()}
/>
}
}
}
}
优点:
* 更方便的实现相同逻辑的复用,可以直接给其他组件反复使用
* 通过高阶组件的state,驱动无状态组件的数据刷新,实现逻辑和UI分离,代码清晰
缺点:
* 对属性名称限制大,若同样功能,属性名称不一致,就导致高阶组件失效
方案二:
通过自定义Hooks的方式实现
// 主函数
const Count = () => {
const [count, add, minus] = useCount()
return (
<div>
<p>当前总数{count}</p>
<button onClick={() => add()}>加</button>
<button onClick={() => minus()}>减</button>
</div>
)
}
// 自定义hook
const useCount = () => {
// 初始化总数值
const [count, setCount] = useState(0)
// 点击事件:总数加一
const add = () => {
setCount(count => count + 1)
}
// 点击事件:总数减一
const minus = () => {
setCount(count => count - 1)
}
// 将属性值和方法导出
return [
count,
add,
minus
]
}
优点:
- 代码量减少,逻辑相对清晰
- 结构相对于高阶组件更加简单明了
- 不受属性名称限制
个人总结:
高阶组件是在使用class组件时,state被定义在了内部,导致逻辑上的复用困难,才出现的一种设计模式。
但是在新版的React中,整个React社区都在推崇函数式的编程方式,所以Hooks的学习就变得重要起来。一些简单的逻辑复用完全可以使用Hooks去实现,避免使用高阶组件使组件变得极其复杂。
本次的分享也只是针对高阶组件相对简单的功能去理解。本人学习能力有限,对于更高深的高阶组件用法请移步React官网学习。