Различия между ссылками и состоянием (useState and useRef) Flashcards
Различия между ссылками и состоянием (useState and useRef)
useRef:
1. useRef(initialValue) ВОЗВРАТ { current: initialValue }
2. Не запускает повторный рендеринг при его изменении.
3. Изменяемый — вы можете изменять и обновлять значение current вне процесса рендеринга.
4. Вы не должны читать (или записывать) current значение во время рендеринга.
useState:
1. useState(initialValue) возвращает текущее значение переменной состояния и функции установки состояния ( [value, setValue])
2. Запускает повторный рендеринг при его изменении.
3. «Неизменяемый» — вы должны использовать функцию настройки состояния для изменения переменных состояния, чтобы поставить в очередь повторный рендеринг.
4. Вы можете прочитать состояние в любой момент. Однако у каждого рендера есть свой снимок состояния, который не меняется.
У подхода с useRef есть минус: нельзя получить значение после каждого введенного символа
В App:
const inputRef = useRef<HTMLInputElement>(null)
<input ref={inputRef}/></HTMLInputElement>
в Item:
<Button
title={‘+’}
onClick={() => {
if (inputRef.current) {
createTask(inputRef.current.value)
inputRef.current.value = ‘’
}
}}
/>
