今晚我在网上冲浪的时候突然发现了一个叫做 use-less 的 React Hooks 库,这库名 useless 不就是「无用」的意思嘛,作者是在搞笑吗?
当我看了库的介绍之后,我发现作者确实就是在搞笑无疑。来我们看看这个库的简介是怎么写的。
翻译如下:
use-less
React hooks that help you do what you already did, with more indirection
无用
让你间接地做到你以前就能做到的事情
所有源码都是我用 TypeScript 写的,所以我可以保证这些代码没有 bug!
useProps
我们知道 useState 可以让你使用 state,那么为什么没有一个 hook 让我们使用 props 呢?
无用提供的 useProps 就是这样一个 Hook,代码如下
import { useProps } from '@pveyes/use-less'; function Component(props) { const actualProps = useProps(props); return <div {...actualProps} />; }复制代码
如果 props 计算起来消耗性能,我还提供了 lazy initializer,跟 useState 保持一致!
import { useProps } from '@pveyes/use-less'; function Component(expensiveProps) { const props = useProps(() => expensiveProps); return <div {...props} />; }复制代码
useConstructor
如果你怀念以前在 React class 组件里使用 contrstructor 和 this 的日子,那么我推荐你使用 useConstructor,代码如下:
import { useConstructor } from '@pveyes/use-less'; function Component() { // 如果 JS 引擎不允许你将变量名设为 this,你可以使用斯拉夫字母,如 Т??? const th?s = useConstructor(function constructor() { this.state = { text: string; } }); // 用回 this.state.xxx 的感觉真好!对,不,对! return ( <input value={th?s.state.text} onChange={e => th?s.setState({ text: '' })} /> ); }复制代码
其他几个 API 也很搞笑,有兴趣可以自己看下代码 :)
这个库后面还有一个问答环节,也充满了浓浓的讽刺意味,我来试着翻译一下:
问:这个库支持 React concurrent 模式吗?
答:是的,所有的 Hook 都支持该模式。我为了确保我的库兼容将来版本的 React,我还特地在测试代码里加了 React.StrictMode 呢!
问:我能在生产环境里使用这个库吗?
答:当然可以!因为我已经把版本号设置成了 1.x.x 了呀~
问:你是不是在开玩笑?
答:宁说呢。