useSignal()

使用 useSignal() 存储任何单个值,类似于 useStore()useSignal 在重新渲染组件方面经过了高度优化。即使信号本身是在父组件中定义的,它也能够跳过父组件的重新渲染。useSignal 与所有 原始类型 以及非嵌套/扁平对象一起使用。如果您需要存储数组或复杂对象,请改用 useStore

一些例子是

const intStore = useSignal(0);
const stringStore = useSignal('foo');
const booleanStore = useSignal(true);
const objectStore = useSignal({fruit: 'apple', color: 'green'});
 
// DON'T DO THIS!
const arrayStore = useSignal(['banana','oranges']);
const nestedObjectStore = useSignal({
  fruits: {
    banana: 10,
    apple: 5
  },
  vegetables: {
    tomato: 7,
    broccoli: 14
  }
});

要读取或更新值,您可以简单地访问 value 属性

<>
  <button onClick$={() => intStore.value++}>Click me</button>
  <p>{intStore.value}</p>
</>

它还可以保存由组件创建的 DOM 元素的引用。

获取 DOM 元素引用有两个部分

  1. useSignal() 返回一个包含 value 属性的存储对象,该属性最终将包含引用。
  2. ref={_ref_variable_} 是一个 prop 绑定,它将 ref 对象的 value 属性设置为 DOM 元素。

示例

右侧的示例使用 useSignal() 获取对 aside 元素的引用。但是,它缺少 ref prop 绑定。添加 ref prop 绑定以使示例按预期工作。

编辑教程