1 简单概念
1 名称说明:
1 高阶组件 == 高阶函数 == 容器组件
2 被高阶组件修饰的组件 == UI组件
3 官方描述: 是 React用于复用组件逻辑的一种高级技巧
2 作用说明
1 业务逻辑复用的高级技巧, 可让某一个组件, 通过高阶函数内部修饰, 实现功能扩展
2 高阶组件是非必须使用的, 宏观作用就是, 减少代码量, 让代码变得优雅简洁, 方便管理
3 理解
1 是基于React组件的组合特性而来一种设计模式
2 高阶组件就是一个函数, 接收组件, 基于这个类做一些扩展, return 一个新的组件出去
3 这个新的组件就包含了, 高阶函数内部的方法以及数据, 以及接收进来的组件实例
4 并且高阶函数内的新组件会向, 接收进来的组件实例, 以父子通信的方式传递需要的数据
5 也可以把高阶组件理解为一个工厂, 统一加工一些, 需要扩展某些相同功能的组件类
4 使用场景
1 若有 9个组件需要同一个接口数据, 可以把数据请求放在高阶函数内, 去帮需要的组件扩展
2 某些视图结构 (HTML结构), 需要被多个组件视图复用的情况
3 某些业务逻辑, 功能方法等, 需要在多个组件中复用的情况
3 注意事项
1 当一个UI组件同时被多个容器组件(高阶函数)修饰时, 发现 props有丢失的情况, 处理方案
1 以后写代码, 若需要被多个高阶组件修饰, 习惯性加这个展开运算符
2 高阶函数中, UI组件实例的位置: <A1 {
...this.props} />
2 class 类组件的装饰器语法, 知道就行了, 花里胡哨的不好用 --> @xx calss ...
2 高阶组件的定义
import React from 'react'
function Test(A1) {
return class extends React.Component {
constructor(props) {
super(props)
this.state = {
list: []
}
}
componentDidMount() {
const arr = [
{
id: 1, label: 'hehe1'},
{
id: 2, label: 'hehe2'},
{
id: 3, label: 'hehe3'}
]
this.setState({
list: arr})
}
render() {
return() {
<div> <A1 {
...this.props} hh="hehe" arrs={
list}/> </div>}}
}
}
export default Test
3 高阶组件的使用