Reactive Utilities

on

import { on } from "solid-js"

function on<T extends Array<() => any> | (() => any), U>(
  deps: T,
  fn: (input: T, prevInput: T, prevValue?: U) => U,
  options: { defer?: boolean } = {}
): (prevValue?: U) => U | undefined

on 被设计用于传入计算中以使其依赖关系明确。如果传入依赖数组，则 input 和 prevInput 也是数组。

createEffect(on(a, (v) => console.log(v, b())));

// 等同于:
createEffect(() => {
  const v = a();
  untrack(() => console.log(v, b()));
});

你也可以通过将 defer 选项设置为 true 来选择不立即运行计算，而是只在发生变化时运行。

// 不会立即运行
createEffect(on(a, (v) => console.log(v), { defer: true }));

setA("new"); // 现在它会运行

将 `on` 与存储一起使用

Info:

请注意，对于存储和可变对象，在父对象上添加或删除属性将触发效果。参见 createMutable

const [state, setState] = createStore({ a: 1, b: 2 });

// 这样是行不通的
createEffect(on(state.a, (v) => console.log(v)));

setState({ a: 3 }); // 不会打印任何内容

// 应该使用箭头函数
createEffect(
  on(
    () => state.a,
    (v) => console.log(v)
  )
);

setState({ a: 4 }); // 打印 4

参数和选项

参数	类型	描述
deps	`T`	要监视的依赖项。
fn	`(input: T, prevInput: T, prevValue?: U) => U`	当依赖项改变时要运行的函数。
options	`{ defer?: boolean }`	配置效果的选项。

报告此页面问题

on

将 on 与存储一起使用

参数和选项

将 `on` 与存储一起使用