MaterialUI 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

确保提取渲染范围之外的所有常量值。

例如，您为其提供新对象的每个渲染InputLabelProps都会InputProps强制重新渲染子组件。

因此，每个不是必须在功能组件内创建的新对象，您应该将其提取到外部，

包括 ：

        const touchHandler = () => {
            dispatch({
                type: 'TOUCH'
            });
        };
    
        const useStyles = makeStyles((theme) => ({
            root: {
                display: 'flex',
                flexWrap: 'wrap',
                color: 'white'
            },
            input: {
                margin: '10px',
                '&& .MuiInput-underline:before': {
                    borderBottomColor: 'white'
                },
            },
            label: {
                color: 'white'
            }
        }));
    
        const theme = createMuiTheme({
            palette: {
                primary: green,
            },
        });
    

您还可以使用 Reactmemo进行功能组件优化，似乎适合您的情况。