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 绑定以使示例按预期工作。