基于TypeScript与React Hooks开发的通用组件库

项目地址（欢迎star）：react-draggable-layer

技术博客：www.linxiangjun.com

前言

2019年以来，愈来愈多的公司与项目都选择使用强类型语言TypeScript做为主要语言，能够预见的是2020年TypeScript将成为前端开发所须要具有的能力之一。

目前前端工程师使用最多的无疑问是微软开源的VSCode，它自己提供的功能并很少，可是经过支持插件的方式使得其具有了IDE的强大能力。同时，VSCode是使用TypeScript基于Eletron开发的，使得它对于TypeScript的支持很是的强大。若是你使用的编辑器是VSCode，那么项目中彻底使用TypeScript编程将会大大的提升编程效率，甚至使用一段时间后你会发现，已经渐渐离不开TypeScript。

应用新的语言仍是语法都会面临着许多困难和陷阱，这个时候若是可以参考一些现成的写法确定会带来收益。这也是我写这篇文章的初衷。

下面是react-draggable-layer使用到的一些技术细节：

• TypeScript
• React Hooks
• React Portals
• emotion
• Babel

实现

Portals

实现一个弹层类组件，React提供了Portals方法，可以将子节点渲染到存在于父组件之外的DOM节点上。咱们先实现一个封装了Portals方法的通用组件：

components/Portal.jsx

import React, { useEffect, useRef } from "react";
import ReactDOM from "react-dom";

interface PortalProps {
  children: React.ReactElement;
}

const Portal: React.FC<PortalProps> = props => {
  // 使用useRef建立ref对象，能够用来保存节点
  const { current: el } = useRef(document.createElement("div"));

  // 等同于类组件的componentDidMount方法
  useEffect(() => {
    const root = document.getElementById("root");
    if (root) {
      root.appendChild(el);
    }

    // 组件销毁后记得移除div
    return () => {
      if (root) {
        root.removeChild(el);
      }
    };
  }, []);

  return ReactDOM.createPortal(props.children, el);
};

export default Portal;

复制代码

css-in-js

有了Portal组件以后在可拖拽弹层组件中引入，这样组件在使用时就能够挂载到root节点下。在组件中样主要是以css-in-js的方式来实现的，它的优势有：

1. 不须要引入css样式文件或者css预处理器
2. 可避免由于样式名冲突带来的全局污染问题
3. 不须要各类繁琐的命名规则

这并非说它就没有缺点的，一样的，使用css-in-js来开发会使得不少高阶css用法很是的复杂，因此须要根据项目状况来辩证的思考与选择。不过对于此项目来讲css-in-js就很是的合适，它使得咱们能够将更多的精力放在组件化上面。另外这里推荐下emotion这个库。

React.FC

这里先来基于项目说一下TypeScript开发React函数式组件的规范：

interface DraggableLayerProps {
  children?: React.ReactElement;
  titleName?: string;
  visible?: boolean;
  onClose?: () => void;
}

const DraggableLayer: React.FC<DraggableLayerProps> = props => <Component />

export default DraggableLayer
复制代码

使用函数式组件时须要将组件申明为React.FC类型，也就是Functional Component的意思，另外props须要申明各个参数的类型，而后经过泛型传递给React.FC。

draggable

可拖拽功能的实现是基于实时计算组件x轴与y轴的距离来实现的，具体代码比较简洁：

let initX = 0;
let initY = 0;
let isMouseDown = false;

const handleMouseDown = (e: MouseEvent) => {
    isMouseDown = true;
    initX = e.offsetX;
    initY = e.offsetY;
    draggableRef.current.style.opacity = 0.5;
  };

  const handleMouseMove = (e: MouseEvent) => {
    if (isMouseDown) {
      const x = e.clientX - initX;
      const y = e.clientY - initY;
      draggableRef.current.style.left = `${x}px`;
      draggableRef.current.style.top = `${y}px`;
    }
  };

  const handleMouseUp = () => {
    isMouseDown = false;
    if (draggableRef && draggableRef.current) {
      draggableRef.current.style.opacity = 1;
    }
  };
复制代码

稳健性

在组件获取props时有不少可选的参数，好比titleName，由于使用了TypeScript，因此对可选参数进行赋值操做时提示错误信息，这点在开发时可以有效的避免出错。另外，组件销毁后须要在useEffect的return回调函数中清除绑定的event。这些细节须要注意。

总结

很是欢迎尝试本项目，能够直接使用npm install react-draggable-layer来使用，有好的建议也但愿可以收到提交的issues。一些更加详细的使用说明在项目中的README文件中。若是本文或者项目对你有帮助的话，很是高兴您可以点下star支持。