React组件逻辑复用的三种实现方式对比

React

字数统计: 194阅读时长: 1 min

 2021/04/22   Share

React组件逻辑复用的三种实现方式对比

HOC

- 组件嵌套过多，不易渲染，不易调试
- HOC会劫持props，必须严格规范，容易出现疏漏

Render Props

- 学习成本高，不易理解
- 只能传递纯函数，默认下纯函数功能有限

Hooks

- 完全符合Hooks的原有规则
- 变量和作用域明确
- 不会产生组件嵌套

import { useState, useEffect } from 'react'


function useMousePosition() {
    const [x, setX] = useState(0)
    const [y, setY] = useState(0)

    useEffect(() => {
        function mouseMoveHandler(event) {
            setX(event.clientX)
            setY(event.clientY)
        }
        // 绑定事件
        document.body.addEventListener('mousemove', mouseMoveHandler)
        // 解绑事件
        return () => document.body.removeEventListener('mousemove', mouseMoveHandler)
    }, [])

    return [x, y]
}

export default useMousePosition

// 使用
const [x, y] = useMousePosition()

return (
    <div>{x}<div>
    <div>{y}<div>
)

Next Post

执行上下文、变量对象、作用域链与闭包
Previous Post

手写一个Promise

CATALOG

1. React组件逻辑复用的三种实现方式对比

