首页/文章/react

简单理解高阶组件

2022-11-19

520 字约 2 分钟

...

什么是高阶组件

高阶组件是包装了另一个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
    ]
}`