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;