哎吗,这个库太搞笑了,我必定要翻译一下

今晚我在网上冲浪的时候忽然发现了一个叫作 use-less 的 React Hooks 库,这库名 useless 不就是「无用」的意思嘛,做者是在搞笑吗?git

当我看了库的介绍以后,我发现做者确实就是在搞笑无疑。来咱们看看这个库的简介是怎么写的。github

翻译以下:bash

use-lessless

React hooks that help you do what you already did, with more indirection性能

无用测试

让你间接地作到你之前就能作到的事情ui


全部源码都是我用 TypeScript 写的,因此我能够保证这些代码没有 bug!this

usePropsspa

咱们知道 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 了呀~

问:你是否是在开玩笑?

答:宁说呢。


image.png

相关文章
相关标签/搜索