React повторно отображает все элементы управления формы при каждом изменении ввода текста - PullRequest
1 голос
/ 13 апреля 2020

Я использую реагирование с машинописным и функциональным компонентами и интерфейсом материалов, у меня большая форма. Небольшая часть приведена ниже.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...