В настоящее время я работаю с реагировать, и я делаю обычную форму, ничего сложного, но производительность является серьезной проблемой в нашей команде, поэтому мне было интересно, если существует способ оптимизировать формы реакции лучше, позвольте мне объясните:
У меня есть родительский компонент, который является компонентом диалоговой формы, который состоит из карточки, внутри которой есть верхний колонтитул, тело и нижний колонтитул; заголовок имеет заголовок, нижний колонтитул имеет кнопки отправки и отмены, но в теле вложен другой компонент, имеющий поля и состояние, относящиеся к каждому полю.
Что я хочу сделать, так это то, что когда я отправляю форму через кнопку родительского компонента, я хочу получить значения дочернего компонента, сделать запрос к базе данных, а остальное - история.
Проблема в том, что, если я поднимаю состояние полей до родительского компонента, верхний и нижний колонтитулы этого компонента также будут отображаться, вызывая ненужную визуализацию некоторых компонентов; альтернатива, которую я могу придумать, - это использовать ссылку на этот вложенный компонент, и при отправке получить значение полей, имеющих что-то вроде этого
function FormDialog () {
const fieldsRef = useRef(null);
const handleSubmit = () => {
const data = fieldsRef.current.getData();
...
}
return (
<Dialog>
<Header title="Create ToDo" />
<Body>
<FormFields ref={fieldsRef} />
</Body>
<Footer>
<Button>Cancel</Button>
<Button onSubmit={handleSubmit}>Submit</Button>
</Footer>
</Dialog>
)
}
Есть мысли?