rurumi v0.0.0

Rurumi

version 0.0.0

hook

useSubscribe

事件訂閱：當收到 publish 的通知時觸發訂閱的方法，所以會與 publish 搭配使用，會自動回收訂閱事件，所以不用手動回收(pop)

類型

interface UseSubscribe {
  // pop 為取消訂閱事件
  (name: string, emitFunction: Function): { pop: () => void }
}

範例

• 一般訂閱

import React from 'react'
import { useForceUpdate, useSubscribe } from 'rurumi'

const App = () => {
  // 每次收到 publish('update-app') 的通知時，觸發頁面重新渲染
  const forceUpdate = useForceUpdate()
  useSubscribe('update-app', forceUpdate)
  // ...
}

• 一次性訂閱

import React from 'react'
import { useForceUpdate, useSubscribe } from 'rurumi'

const App = () => {
  const forceUpdate = useForceUpdate()
  // pop 為取消訂閱
  // 當收到通知時取消該訂閱的綁定並將頁面重新渲染
  const subscriber = useSubscribe('update-app', () => {
    subscriber.pop()
    forceUpdate()
  })
  // ...
}

• 接收 publish 的數據

import { publish, useSubscribe } from 'rurumi'

const App = () => {
  // useSubscribe 的 callback 可以接收一個值(action)
  useSubscribe('print', (word: string) => console.log(word))

  return (
    <div>
      <button onClick={() => publish('print', 'hello world!')}>
        點擊打印 hello world!
      </button>
    </div>
  )
}

useCreated

首次加載觸發的鉤子，僅觸發一次(不需要 await 建議使用 useEffect)

類型

interface UseCreated {
  (createFunc: Function): void
}

範例

import React from 'react'
import { useCreated } from 'rurumi'

const App = () => {
  useCreated(async () => {
    await callApi()
    // ...
  })
  // ...
}

useDestory

組件銷毀時觸發的鉤子

ps：

• useSubscribe 會自動回收，不用在此 pop
• DOM 事件的綁定清除，請使用 useEffect 處理

類型

interface UseDestory {
  (destoryFunc: Function): void
}

範例

import React from 'react'
import { useDestory } from 'rurumi'

const timer = setInterval(() => {
  console.log(new Date())
}, 1000)

const App = () => {
  useDestory(() => clearInterval(timer))
  // ...
}

useForceUpdate

組件重新渲染鉤子

類型

interface ForceUpdate {
  (): void
}
interface UseForceUpdate {
  (): ForceUpdate
}

範例

import React from 'react'
import { useForceUpdate } from 'rurumi'

const App = () => {
  const forceUpdate = useForceUpdate()

  return (
    <div>
      {/* 點擊按鈕重新渲染 App 組件 */}
      <button onClick={forceUpdate}>重新渲染</button>
    </div>
  )
}

useResetWithKey

刷新表單的 default 值

類型

interface UseResetWithKey {
  (): [string, () => void]
}

範例

import { Input, Button } from 'antd'
import { useResetWithKey } from 'rurumi'

const App = () => {
  const [resetKey, reset] = useResetWithKey()

  // resetKey 綁定要刷新的範圍
  return (
    <div key={resetKey}>
      {/* 如果沒有綁 value 走的是 defaultValue，這時要清空 default 數據就必須使用此 hook */}
      <Input />
      {/* 調用 reset 來刷新表單 */}
      <Button onClick={reset}>刷新 input</Button>
    </div>
  )
}

function

publish

通知：通知使用 useScribe 訂閱的對象，使之觸發訂閱其方法，可以傳遞一個參數

類型

interface Publish {
  <T>(name: string, action?: T): void
}

範例

// 基本款
publish('render-header')
// 帶參數
publish<{ length: number }>('render-header', 'hello world')

forgetMemory

清除單筆由 Memorize 儲存的數據

類型

interface ForgetMemory {
  <T, K extends keyof T>(object: T, key: K, initial?: K extends keyof T ? T[K] : undefined): void
}

範例

class User {
  @Memorize('frank')
  name: string
}

const user = new User()

// 清除
forgetMemort(user, 'name')
// 清除並將預設值設成 jeff
forgetMemort(user, 'name', 'jeff')

resetMemory

清除所有由 Memorize 儲存的數據

類型

interface ResetMemory {
  (): void
}

範例

resetMemory()

Decorator

Memorize

永久化數據儲存(記憶在 localStorage (預設) / sessionStorage 裡)，如果 storage 裡沒有值的話預設為 Memorize 第一個參數的值，存放的 storage 的參數名會以 rm_ 開頭

類型

interface Memorize {
  <T>(className: string, key: string, initial?: T, storageName?: string): [() => undefined | T, (data: T) => string]
}

範例

class User {
  // 空值預設為 undefined
  @Memorize() 
  public id: number

  // 預設為 frank
  @Memorize('frank') 
  public name: string
  
  // 預設為 24，儲存在 sessionStorage 裡面
  @Memorize(24, 'sessionStorage') 
  public age: number
}