React Hooks. Должен ли я использовать «useState» для неизменного состояния?
Когда я впервые изучал React Component, мне всегда говорили ставить все в this.state. Будь то часть данных, которые часто обновляются, или те, которые никогда не обновляются вообще.
Однако с реализацией хуков React я не уверен, как часто мне следует использовать useState, даже если состояние не будет обновляться.
Позвольте мне привести вам пример моей логики формы:
const FormAuth = props => {
//Frequently updates
const [validInput, setValidInput] = useState({
isCompletedForm: Boolean,
firstName: Boolean,
lastName: Boolean,
email: Boolean,
password: Boolean,
confirmPassword: Boolean
});
// Never updates
const [formSchema, setFormSchema] = useState({
firstName: Joi.string().required(),
lastName: Joi.string().required(),
email: Joi.string().required().email().regex(emailRegex),
password: Joi.string().required().regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&?.]).{8,30}$/),
confirmPassword: Joi.string().required()
})
// Never updates
const [inputRef, setInputRef] = useState({
firstNameRef: React.createRef(),
lastNameRef: React.createRef(),
emailRef: React.createRef(),
passwordRef: React.createRef(),
confirmPasswordRef: React.createRef()
});
// render some JSX
}
Здесь у меня есть 3 состояния. Первое состояние — это булевы значения, которые сообщают, хорошо ли выглядят входные данные. Второе состояние — это formSchema, которая никогда не будет обновляться. Наконец, третье состояние — это Refs для каждого из входов, которые также никогда не будут обновляться.
Мой вопрос: Было бы более разумно использовать иметь только одно состояние для validInputs, поскольку он часто обновляется, а затем для formSchema и inputRef создать константный объект с ванильным javascript? Или все должно прийти в состояние, как раньше?
Мне кажется, что было бы более разумно использовать useState только в том случае, если это состояние будет обновляться, но я пытаюсь понять, каково правильное соглашение для продвижения хуков.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам нужно использовать состояние только в том случае, если:
- он управляет своего рода элемент (например,
input,select,textareaи так далее). - он контролирует некоторые виды данных, которыми необходимо манипулировать (например, список задач, в котором должны быть некоторые элементы, которые создаются, читаются, обновляются и удаляются — это справедливо и для изоморфных приложений, где некоторые данные необходимо манипулировать на перед отправкой на серверную часть для хранения).
- он используется для своего рода условный рендеринг, где DOM необходимо повторно отображать с изменениями пользовательского интерфейса (например, логическое значение
isLoading, которое показывает счетчик, когдаtrue, но затем отображает какой-то макет, когдаfalse).
Нет причин загромождать ваше состояние, если оно (независимо от тип данных): его необходимо повторно использовать в нескольких компонентах, оно статично и никоим образом не обновляет DOM (например, ref или функция проверки на уровне поля или какой-то статический список предметов).
Проще говоря, не имеет значения, является ли это компонентом класса или функциональным компонентом с хуком, вам нужно будет использовать состояние только в том случае, если оно требует динамического управления/управления чем-либо в DOM.
Вот простой пример формы с некоторой проверкой:
я боюсь, что ваше часто обновляемое состояние находится в объекте. да, вы можете это сделать, но это не лучший способ обновить ваше индивидуальное состояние, поместив их в объект.
вам не нужно держать данные в состоянии, если они не изменяются или не обновляются. вы можете назначить этот тип данных в некоторых переменных.
//you can track your state value and state change by this function
//you can use this same function in different component
export function useFormInput(initialValue = "") {
const [input, setInput] = useState(initialValue);
function handleInputChange(e) {
setInput(e.target.value);
}
return {
value: input,
onChange: handleInputChange,
}
}
const FormAuth = props => {
//Frequently updates
//useFormInput function will return input value and unchange function
const firstName = useFormInput();
const lastName = useFormInput();
// Never updates
//here your not updating data is assigned in formSchema variable
const formSchema = {
firstName: Joi.string().required(),
lastName: Joi.string().required(),
email: Joi.string().required().email().regex(emailRegex),
password: Joi.string().required().regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&?.]).{8,30}$/),
confirmPassword: Joi.string().required()
}
// Never updates
const inputRef = {
firstNameRef: React.createRef(),
lastNameRef: React.createRef(),
emailRef: React.createRef(),
passwordRef: React.createRef(),
confirmPasswordRef: React.createRef()
}
return(
<div>
//firstname value and onchange function will be
//assigned useing spread operator
<input {...firstName} placeholder = "first name"/>
<input {...lastName} placeholder = "last name"/>
</div>
)
}
Я думаю, вам следует использовать хуки
useRefвместоcreateRef