tiny jsx

tinyjsx

TinyJSX是一個輕巧的UI JavaScript庫，用於使用功能組件開髮用戶界面。

GZIP包裝尺寸

brotli套餐的大小

---

用法

TinyJSX暴露了一個API，該API模擬了最近的React鉤子實現，但實際上很小。

TinyJSX僅支持功能組件。

 import TinyJSX from 'tiny-jsx' ;
import { render } from 'tiny-jsx/dom' ;
import useEffect from 'tiny-jsx/hooks/useEffect' ;
import useState from 'tiny-jsx/hooks/useState' ;

function Clock ( ) {
  const [ tick , setTick ] = useState ( 0 ) ;
  useEffect ( ( ) => {
    const interval = setInterval ( ( ) => {
      setTick ( tick + 1 ) ;
    } , 1000 ) ;
    return ( ) => clearInterval ( interval ) ;
  } , [ tick ] ) ;

  return (
    < div > Seconds: { tick } </ div >
  ) ;
}

render ( < Clock /> , document . body ) ;

對於較小的捆綁尺寸，所有鉤子都是單獨出口的。您仍然可以從上述示例中導入鉤子：

 import { useState , useEffect } from 'tiny-jsx/hooks' ; 

例子

在示例目錄中可以找到一些簡單的示例。您還可以在此處使用UMD構建看到庫：

• 鐘
• 戒酒
• 路由器

入門

安裝

使用yarn或npm的nodejs

$ yarn add tiny-jsx
or
$ npm install --save tiny-jsx

或在瀏覽器中

 < script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx.min.js " > </ script >
< script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx-hooks.min.js " > </ script >
< script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx-dom.min.js " > </ script >
< script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx-router.min.js " > </ script >

進口

tiny-jsx庫允許使用命名和默認導出。

命名導入：

 import { createElement } from 'tiny-jsx' ;

// Tell Babel to transform JSX into createElement() calls:
/** @jsx createElement */ 

默認導入：

 import TinyJSX from 'tiny-jsx' ;

// Tell Babel to transform JSX into TinyJSX.createElement() calls:
/** @jsx TinyJSX.createElement */

而不是聲明@jsx Pragma，您可以通過將其添加到Babel配置文件中在全球使用它

對於Babel 5和先驗：

{ "jsxPragma" : " TinyJSX.createElement " }

對於babel 6：安裝轉換 - 反應-JSX插件，然後將其添加到配置文件中：

{
  "plugins" : [
     [ " transform-react-jsx " , { "pragma" : " TinyJSX.createElement " }]
  ]
}

對於Babel 7：安裝 @babel/plugin-transform-react-jsx插件，然後將其添加到配置文件中：

{
  "plugins" : [
    [ " @babel/plugin-transform-react-jsx " , { "pragma" : " TinyJSX.createElement " , "pragmaFrag" : " TinyJSX.Fragment " }]
  ]
}

對於打字稿，添加到tsconfig.json ：

{
  "jsx" : " react " ,
  "jsxFactory" : " TinyJSX.createElement "
}

渲染

tinyjsx transpile函數將JSX組件轉換為虛擬DOM元素（如下所述） 。為了在瀏覽器中渲染虛擬DOM元素，TinyJSX提供了render()函數，該函數可創建相應的DOM樹並將其從現有DOM樹中渲染為元素。

 import TinyJSX from 'tiny-jsx' ;
import { render } from 'tiny-jsx/dom' ; 

render ( < div > Hello World! </ div > , document . body ) ;