Различия

Показаны различия между двумя версиями страницы.

--- xuk_usestate [2024/03/11 19:41]
tro создано
+++ xuk_usestate [2024/03/13 19:37] (текущий)
tro
@@ Строка 1: / Строка 1: @@
-====== Хук useState ======
+====== Хуки ======
-**Хуки** - це просто спеціальні функції, за допомогою яких можна "підключитися" до різних можливостей React. Стан - це лише одна з їх можливостей, але ви зустрінете інші хуки пізніше.
+**Хуки** - це просто спеціальні функції, за допомогою яких можна "підключитися" до різних можливостей React. Стан - це лише одна з їх можливостей.
 Якщо ви бажаєте використовувати хук, імпортуйте його в файлі компонента з бібліотеки React.
+====== Хук useState ======
+Варіант змінної, зміна значення котрої повідомить реакту що потрібно перемалювати відображення значення цієї змінної на формі.
 Єдиним аргументом для useState є початкове значення змінної стану. У цьому прикладі початкове значення clicks встановлено на 0 за допомогою useState(0)
 Кожного разу, коли компонент рендериться, useState повертає масив, що містить два значення:
+  * Змінна **clicks** зі збереженим поточним значенням.
-  * Змінну стану (clicks) зі збереженим поточним значенням.
+  * Функцію встановлення стану **setClicks**, яка може оновлювати змінну стану і викликати повторний рендеринг компонента.
-  * Функцію встановлення стану (setClicks), яка може оновлювати змінну стану і викликати повторний рендеринг компонента.
 <code>
@@ Строка 24: / Строка 25: @@
 </code>
+===== Декілька станів =====
+Ви можете мати стільки змінних стану, скільки потрібно в одному компонентії. Для кожного використовуйте окремий useState.
+<code>
+const App = () => {
+  const [clicks, setClicks] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+  const handleClick = () => {
+    setClicks(clicks + 1);
+  };
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+  return (
+    <>
+      <button onClick={handleClick}>Current: {clicks}</button>
+      <button onClick={handleToggle}>{isOpen ? "Hide" : "Show"}</button>
+      {isOpen && <p>Now you can see me!</div>}
+    </>
+  );
+};
+</code>
+===== різне =====
+  - стан є повністю приватним для компонента, що його визначає. Батьківський компонент не може його змінити. Це дозволяє додавати стан до будь-якого компонента чи видаляти його без впливу на решту компонентів
+  - Будь-які хуки можна викликати лише на верхньому рівні функції компонента. Це означає, що вони повинні знаходитися безпосередньо в тілі функції компонента, а не всередині циклів, умов, вкладених функцій і так далі. Такі обмеження спрощують написання логіки компонента та роблять код більш читабельним.
+  - Якщо потрібно встановиити сет-ом тільки одне значення обекта а іньші залишитии як і були, то можна "розпилити"  **setDrinks({...drinks, myField: newValue})**