哎嗎,這個庫太搞笑了,我必定要翻譯一下

今晚我在網上衝浪的時候忽然發現了一個叫作 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

相關文章
相關標籤/搜索