Preact入坑笔记一
简述
Preact,读:['pri:ækt]
,而非批React
。跟Pure React也扯不上什么关系。
是由谷歌的一群大兄弟开发和维护的优化版React
。这并非造个轮子要取代FB的React
,通过一些资料和实践,发现这个轮子并不简单。具体可以链接到官网,中文说明足够友好,作者真是太赞了。
实践笔记,第一部分
这也并非是近期的新鲜事物,只是我个人刚接触罢了。从这一个月的使用看来,这个确实比React简单一些。比如核心库直接去掉了PropTypes
这种东西,对Render
也进行了优化,搭配TypeScript
和Less
使用,爽的么法…
一. 这里记录下开发环境的配置,主要依赖情况:
- Preact: ^8.2.6
- typescript: ^3.2.4
- Less: ^3.9.0
- Webpack: ^4.29.0
1 | "scripts": { |
之所以加了pm2
,是因为有两份TypeScript
源码需要watch,Webpack
本身watch占用一个console窗口,tsc自己也要有。如果一个命令启动,就会导致一个卡在另一个之前,导致另一个无法启动…..所以索性把webpack直接放到了后台。其本身作为Server服务,也算合理。不过正常情况,不会像我这么变态……
二. TSC
1 | { |
注意jsxFactory
使用的是h
,这个h
是Preact
的核心之一
三. Less的一点问题
1,正常使用import引用less时,IDE会报错提示Cannot find module './style.less'.
。直接加@ts-ignore
可以忽略,但不是好方法
1 | // @ts-ignore |
如上所以,解决方式也很简单:第一新建less.d.ts
文件,第二在该文件内申明less
1 | declare module "*.less"; |
然后,在基类中引用,注意不是import,而是reference指令
1 | /// <reference path="../../typings/less.d.ts" /> |
2,组件上,用点语法使用less的选择器。但又得注意,style.className
的值是随机字符串,并非对象,因此不能接着点(内层嵌套拿不到值),即:style.className.Name1
非法
1 | a { |
以上用法如下:
1 | <nav class={isActive ? style.active : style.normal}>{txt}</a> |
四. Preact无状态组件使用
1 | import {FunctionalComponent, h} from 'preact'; |
五. 其他方面
由于着手的这项目有点怪,所以自制了一款webpack插件,其中有用到了recursive-copy
。需要把指定文件夹里的非TS和TSX拷贝到另外的目录,配置其filter
时曾让人蛋疼不已…..具体请看minimatch。结论是这玩意跟一般正则不一样,当时按正则咋配咋不对
1 | // 过滤ts和tsx |