Я использую реагирование с машинописным и функциональным компонентами и интерфейсом материалов, у меня большая форма. Небольшая часть приведена ниже.
import React, { useState } from 'react';
import { Grid, TextField } from '@material-ui/core';
const PublicProfileTest = () => {
const [state, setState] = useState<{ town: string; county: string }>({
town: '',
county: '',
});
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setState({ ...state, [name]: value });
};
return (
<>
<Grid container justify='center' alignItems='center' spacing={2}>
<Grid item xs={12} md={6}>
<TextField
variant='outlined'
fullWidth
id='town'
label='Town'
name='town'
autoComplete='town'
placeholder='Town *'
value={state.town || ''}
onChange={handleChange}
/>
</Grid>
</Grid>
<Grid container justify='center' alignItems='center' spacing={2}>
<Grid item xs={12} md={6}>
<TextField
variant='outlined'
fullWidth
id='county'
label='County'
name='county'
autoComplete='county'
placeholder='County'
value={state.county || ''}
onChange={handleChange}
/>
</Grid>
</Grid>
</>
);
};
export default PublicProfileTest;
Я использовал инструменты React dev в chrome, чтобы проверить, какие элементы купола ре-рендеринга.
Когда я изменяю город или округ, весь компонент обновляется. Здесь это не проблема, но в большой форме, которую я создаю, она снижает производительность.
Я ожидаю, что реакция перерисовывает только измененную часть dom, поэтому она обновляет весь компонент.
Любая идея и решение для реагирования перерисовывают только измененный компонент.
С уважением,
Iaq