快捷導(dǎo)航

react中使用signal的項(xiàng)目實(shí)踐

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

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

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對(duì)象是signal 返回一個(gè)render函數(shù)
  // render中用到的signal被自動(dòng)收集 變化后更新組件
  return () => <span>{props().num()}</span>
})

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

說明

暫時(shí)不適配熱重載

使用例

import ReactDOM from 'react-dom/client'
import {
  defineComponent,
  createEffect,
  createMemo,
  createSignal,
  onCleanup,
  createRef,
} from '@fane_the_divine/react-signal'
const Page = defineComponent(() => {
  // 驗(yàn)證基本的響應(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) => {
  // 驗(yàn)證組件銷毀后的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) => {
  // 驗(yàn)證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的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)react使用signal內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: