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 元素引用有两个部分
useSignal()返回一个包含value属性的存储对象,该属性最终将包含引用。ref={_ref_variable_}是一个 prop 绑定,它将ref对象的value属性设置为 DOM 元素。
示例
右侧的示例使用 useSignal() 获取对 aside 元素的引用。但是,它缺少 ref prop 绑定。添加 ref prop 绑定以使示例按预期工作。