{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 1. Импорт хука"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сначала нужно импортировать его из "},{"type":"text","marks":[{"type":"code"}],"text":"react"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { useState } from \"react\";\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ 2. Объявление состояния"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Синтаксис:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const [state, setState] = useState(initialValue);\n"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"state"},{"type":"text","text":" — переменная, где хранится текущее значение состояния"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"setState"},{"type":"text","text":" — функция, с помощью которой ты изменяешь это значение"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"initialValue"},{"type":"text","text":" — начальное значение (может быть числом, строкой, объектом, массивом и т.д.)"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"💡 3. Пример — счётчик"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { useState } from \"react\";\n\nfunction Counter() {\n // Объявляем состояние \"count\" со стартовым значением 0\n const [count, setCount] = useState(0);\n\n return (\n \n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔹 "},{"type":"text","marks":[{"type":"code"}],"text":"count"},{"type":"text","text":" — текущее значение"},{"type":"hardBreak"},{"type":"text","text":"🔹 "},{"type":"text","marks":[{"type":"code"}],"text":"setCount"},{"type":"text","text":" — функция, изменяющая состояние"},{"type":"hardBreak"},{"type":"text","text":"🔹 "},{"type":"text","marks":[{"type":"code"}],"text":"useState(0)"},{"type":"text","text":" — начальное значение (0)"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 4. Пример с текстом"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function InputExample() {\n const [text, setText] = useState(\"\"); // пустая строка — начальное значение\n\n return (\n

\n setText(e.target.value)} // обновляем состояние\n />\n

Вы ввели: {text}

\n );\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧰 5. Пример с объектом или массивом"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React не сливает объекты автоматически, как это было в "},{"type":"text","marks":[{"type":"code"}],"text":"setState"},{"type":"text","text":" у классов."},{"type":"hardBreak"},{"type":"text","text":"Поэтому нужно обновлять их вручную, создавая новый объект."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function UserInfo() {\n const [user, setUser] = useState({ name: \"Тим\", age: 25 });\n\n const incrementAge = () => {\n setUser({ ...user, age: user.age + 1 }); // важно копировать объект\n };\n\n return (\n

{user.name}, {user.age}

\n \n

\n );\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚡ 6. Можно использовать функцию для инициализации"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если вычисление начального значения тяжёлое — можно передать "},{"type":"text","marks":[{"type":"bold"}],"text":"функцию"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"и React вызовет её "},{"type":"text","marks":[{"type":"bold"}],"text":"только один раз"},{"type":"text","text":" при первом рендере:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const [value, setValue] = useState(() => {\n console.log(\"Вычисляем стартовое значение...\");\n return expensiveCalculation();\n});\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📋 Итого"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Элемент"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что делает"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useState()"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"создаёт новое состояние"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"state"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"текущее значение"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"setState()"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"обновляет состояние"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"initialValue"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"стартовое значение"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Функция в "},{"type":"text","marks":[{"type":"code"}],"text":"useState(() => ...)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"вычисляется один раз при монтировании"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Как объявить состояние с помощью useState?

Комментарии