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