Question

我正在使用对打字稿和功能组件以及Material UI的反应，我的表格很大。一小部分如下。

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;

我在chrome中使用过React开发工具来检查哪些球型元素正在重新渲染。

当我更改城镇或县的输入时，整个组件都会更新。在这里这不是问题，但是我正在构建的一个大型文件会降低性能。

我希望做出反应，仅重新渲染dom的更改部分，为什么要更新整个组件。

任何使React反应的想法和解决方案仅重新呈现更改后的组件。

此致

伊拉克

React在每个文本输入更改时重新呈现所有表单控件

0 个答案: