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'});
 
// НЕ ДЕЛАЙТЕ ТАК!
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_} - это привязка свойства, которая установит свойство value объекта ref в элемент DOM.

Пример

Пример справа использует useSignal() для получения ссылки на элемент input. Однако в нём отсутствует привязка реквизита ref. Добавьте её, чтобы пример работал должным образом.

Next: useVisibleTask$()

Edit Tutorial