前言
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
1 | import React, { useEffect, useRef } from 'react'; |
css-in-js
有了Portal组件之后在可拖拽弹层组件中引入,这样组件在使用时就可以挂载到root
节点下。在组件中样主要是以css-in-js的方式来实现的,它的优点有:
- 不需要引入 css 样式文件或者 css 预处理器
- 可避免因为样式名冲突带来的全局污染问题
- 不需要各种繁琐的命名规则
这并不是说它就没有缺点的,同样的,使用 css-in-js 来开发会使得很多高阶 css 用法非常的复杂,所以需要根据项目情况来辩证的思考与选择。不过对于此项目来说 css-in-js 就非常的合适,它使得我们可以将更多的精力放在组件化上面。另外这里推荐下emotion这个库。
React.FC
这里先来基于项目说一下 TypeScript 开发 React 函数式组件的规范:
1 | interface DraggableLayerProps { |
使用函数式组件时需要将组件申明为React.FC
类型,也就是 Functional Component 的意思,另外props
需要申明各个参数的类型,然后通过泛型传递给React.FC
。
draggable
可拖拽功能的实现是基于实时计算组件 x 轴与 y 轴的距离来实现的,具体代码比较简洁:
1 | let initX = 0; |
稳健性
在组件获取props
时有很多可选的参数,比如titleName
,因为使用了 TypeScript,所以对可选参数进行赋值操作时提示错误信息,这点在开发时能够有效的避免出错。另外,组件销毁后需要在useEffect
的return
回调函数中清除绑定的 event。这些细节需要注意。
总结
非常欢迎尝试本项目,可以直接使用npm install react-draggable-layer
来使用,有好的建议也希望能够收到提交的 issues。一些更加详细的使用说明在项目中的README文件中。如果本文或者项目对你有帮助的话,非常高兴您能够点下 star 支持。