javascript - Material UI TextField 滞后问题。当表单有很多输入时如何提高性能？

Question

我在使用 MateriaUI 框架的 Textfield 时遇到了一个恼人的问题。我有一个包含许多输入的表单，在字段内键入或删除值时似乎有点滞后。在其他组件中，当有 2 或 3 个输入时，根本没有延迟。
编辑:问题似乎出在我的 onChange 处理程序上。
任何帮助深表感谢。提前致谢。
这是我的自定义输入代码:

import React, { useReducer, useEffect } from 'react';
import { validate } from '../utils/validators';
import TextField from '@material-ui/core/TextField';
import { ThemeProvider, makeStyles, createMuiTheme } from '@material-ui/core/styles';
import { green } from '@material-ui/core/colors';

const useStyles = makeStyles((theme) => ({
    root: {
        color: 'white'
    },
    input: {
        margin: '10px',
        '&& .MuiInput-underline:before': {
            borderBottomColor: 'white'
        },
    },
    label: {
        color: 'white'
    }
}));

const theme = createMuiTheme({
    palette: {
        primary: green,
    },
});


const inputReducer = (state, action) => {
    switch (action.type) {
        case 'CHANGE':
            return {
                ...state,
                value: action.val,
                isValid: validate(action.val, action.validators)
            };
        case 'TOUCH': {
            return {
                ...state,
                isTouched: true
            }
        }
        default:
            return state;
    }
};

const Input = props => {
    const [inputState, dispatch] = useReducer(inputReducer, {
        value: props.initialValue || '',
        isTouched: false,
        isValid: props.initialValid || false
    });

    const { id, onInput } = props;
    const { value, isValid } = inputState;

    useEffect(() => {
        onInput(id, value, isValid)
    }, [id, value, isValid, onInput]);

    const changeHandler = event => {
        dispatch({
            type: 'CHANGE',
            val: event.target.value,
            validators: props.validators
        });
    };

    const touchHandler = () => {
        dispatch({
            type: 'TOUCH'
        });
    };

    const classes = useStyles();

    return (
        <ThemeProvider theme={theme}>
            <TextField
                className={classes.input}
                InputProps={{
                    className: classes.root
                }}
                InputLabelProps={{
                    className: classes.label
                }}
                id={props.id}
                type={props.type}
                label={props.label}
                onChange={changeHandler}
                onBlur={touchHandler}
                value={inputState.value}
                title={props.title}
                error={!inputState.isValid && inputState.isTouched}
                helperText={!inputState.isValid && inputState.isTouched && props.errorText}
            />
        </ThemeProvider>
    );
};

export default Input;

Answer 1

除了@ jony89 的回答。您可以尝试以下 1 种其他解决方法。

在每次按键(onChange)时更新本地状态。

在 blur 事件中调用父级的更改处理程序

       const Child = ({ parentInputValue, changeValue }) => {
      const [localValue, setLocalValue] = React.useState(parentInputValue);
      return <TextInputField
        value={localValue}
        onChange={(e) => setLocalValue(e.target.value)} 
        onBlur={() => changeValue(localValue)} />;

    }

    const Parent = () => {
        const [valMap, setValMap] = React.useState({
          child1: '',
          child2: ''
        });
        return (<>
            <Child parentInputValue={valMap.child1} changeValue={(val) => setValMap({...valMap, child1: val})}
            <Child parentInputValue={valMap.child2} changeValue={(val) => setValMap({...valMap, child2: val})}
        </>
        );
    }

如果您不想重构现有代码，这将解决您的问题。
但实际的解决方法是拆分状态，以便 child1 状态的更新不会影响 child2 的(更改引用或变异)状态。