快捷導航

react中使用signal的項目實踐

更新時間：2026年03月22日 11:11:58 作者：FanetheDivine

本文主要介紹了react中使用signal的項目實踐,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

API

提供了與solid很相似的api

createSignal 創(chuàng)建signal

const [count, setCount] = createSignal(0)
// 正常訪問signal
count()
// 不具有響應(yīng)性的訪問
count.value

createMemo 創(chuàng)建派生signal.同樣可以通過.value方式訪問值
defineComponent 定義組件.

type CompProps = {
  // 組件參數(shù)可以是signal
  num: () => number
}
const Comp = defineComponent<CompProps>((props) => {
  // props對象是signal 返回一個render函數(shù)
  // render中用到的signal被自動收集 變化后更新組件
  return () => <span>{props().num()}</span>
})

createEffect 創(chuàng)建一個副作用它會在useEffect階段被執(zhí)行與組件渲染強相關(guān)
createRef 創(chuàng)建一個react ref 可以直接用在html屬性上
onCleanup 可以為組件 createMemo createEffect提供清理函數(shù)

說明

暫時不適配熱重載

使用例

import ReactDOM from 'react-dom/client'
import {
  defineComponent,
  createEffect,
  createMemo,
  createSignal,
  onCleanup,
  createRef,
} from '@fane_the_divine/react-signal'
const Page = defineComponent(() => {
  // 驗證基本的響應(yīng)式能力
  const [count, setCount] = createSignal(0)
  const spanRef = createRef<HTMLSpanElement>()
  const double = createMemo(() => {
    console.log(spanRef.current)
    onCleanup(() => console.log('memo cleanup', count.value))
    return count() * 2
  })
  createEffect(
    (_, isFirst) => {
      console.log(`effect: isFirst:${isFirst} `, spanRef.current)
      onCleanup(() => console.log('cleanup in effect'))
    },
    [double],
  )
  const [show, setShow] = createSignal(true)
  return () => {
    console.log('render')
    return (
      <>
        <button
          onClick={() => {
            setCount(count() + 1)
            setCount(count() + 1)
          }}
        >
          {count()}
        </button>
        <span ref={spanRef}> {double()}</span>
        <button onClick={() => setShow(!show())}>{show() ? 'hidden' : 'show'}</button>
        {show() ? <SubComp1 value={count} /> : null}
      </>
    )
  }
})
const SubComp1 = defineComponent<{ value: () => number }>((props) => {
  // 驗證組件銷毀后的cleanup被執(zhí)行
  createEffect(() => {
    onCleanup(() => console.log('SubComp1 unmount in effect'))
  })
  onCleanup(() => console.log('SubComp1 unmount'))
  return () => {
    console.log('%csub comp1 render', 'font-size: 28px; font-weight: bold; color: blue;')
    return <SubComp2 value={props().value} />
  }
})
const SubComp2 = defineComponent<{ value: () => number }>((props) => {
  // 驗證signal跨層不重新渲染的能力
  return () => {
    console.log('%csub comp2 render', 'font-size: 28px; font-weight: bold; color: red;')
    return <button>sub comp2 {props().value()}</button>
  }
})
ReactDOM.createRoot(document.getElementById('root')!).render(<Page />)

到此這篇關(guān)于react中使用signal的項目實踐的文章就介紹到這了,更多相關(guān)react使用signal內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: