React Hooks 组件逻辑复用
先回顾 class 组件,再看 Hooks 组件
class 组件逻辑复用
存在的问题
- Mixins 早已废弃
- 变量作用域来源不清
- 属性重名
- Mixins 引入过多会导致顺序冲突
- 高级组件 HOC
- 组件层级嵌套过多,不易渲染,不易调试
- HOC 会劫持 props,必须严格规范,容易出现疏漏
- React Prop
- 学习成本高,不易理解
- 只能传递纯函数,而默认情况下纯函数功能有限
Hooks组件逻辑复用
有哪些好处
- 完全符合 Hooks 原有规则,没有其他要求,易理解记忆
- 变量作用域很明确
- 不会产生组件嵌套
例子
import {useState, useEffect} from "react";
function useMousePosition() {
const [x, setX] = useState(0)
const [y, setY] = useState(0)
useEffect(() => {
function mouseMoveHandler(e) {
setX(e.clientX)
setY(e.clientY)
}
// 绑定事件
document.body.addEventListener("mousemove", mouseMoveHandler)
// 解绑事情
return () => document.body.removeEventListener("mousemove", mouseMoveHandler)
}, [])
return [x, y]
}
export default useMousePosition
测试代码
import React, {useState} from "react";
import useMousePosition from "../customHooks/useMousePosition";
function CustomHooksDemo() {
const [x, y] = useMousePosition()
return <div>
<p>鼠标位置:{x},{y}</p>
</div>
}
export default CustomHooksDemo