useSignal()

useStore()と同様に、単一値を保存するためにuseSignal()を使用します。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要素参照を取得するには、2つの部分があります。

1. useSignal()は、最終的に参照を含むvalueプロパティを含むストアオブジェクトを返します。
2. ref={_ref_variable_}は、refオブジェクトのvalueプロパティをDOM要素に設定するプロップバインディングです。

例

右側の例では、useSignal()を使用してaside要素への参照を取得しています。ただし、refプロップバインディングがありません。期待通りに動作するように、refプロップバインディングを追加してください。

次へuseVisibleTask$()