solidjs 中 createEffect 监听指定的 Signal

React 的 useEffect 只需指定依赖数组

useEffect(()=>{
// code
},[a,b,c])

Vue3 的 watch 可以指定

const state = reactive({ a:0 , b:1 })

watch([()=>state.a,()=>state.b], () => {

})

在 Solidjs 中

默认 createEffect 是监听函数中所有使用到的 Signal,

只要任意一个改变都会触发 createEffect ,

使用 on 方法,

可以指定监听的 Signal ,其他的改变,不会触发 createEffect

单个直接传入 (不用 小括号)

多个使用数组格式

函数参数中可以接收新值与旧值

import { createEffect, createSignal, on } from "solid-js";


const [goldCoinNum, setGoldCoinNum] = createSignal<string>("");
const [goldCoinRatio, setGoldCoinRatio] = createSignal<string>("");

// on(goldCoinNum,(a,b)=>{})
createEffect(
  on([goldCoinNum, goldCoinRatio], () => {

    let num = Number.parseFloat(goldCoinNum());
    let ratio = Number.parseFloat(goldCoinRatio());
    //code

  })
);

传入 defer 参数, 可以使第一次不执行内部的逻辑

createEffect(
   on(a, 
     (v1,v2) => {
        console.log(v1)
     },
     { defer: true }
   )
);

版本

solidjs 1.8.7

其他

https://www.solidjs.com/docs/latest/api#on