如何防止react组件每次呈现父组件时都呈现？

Question

我在一个表单上有一个TextField输入，问题是当我在它上键入时，刚刚键入的值的显示/呈现有一种延迟，我想防止这种延迟。

代码：

export const Contact = (props) => {
  const [formInput, setFormInput] = useState({input: 'name', label: 'Type name'});
¿   const [inputsValue, setInputsValue] = useState({name: '', email: '', message: ''});

    const handleClick = () => {
        switch (formInput.input) {
            case 'name':
                setFormInput({ input: 'email', label: 'type email' });
                break; 
            case 'email':
                setFormInput({ input: 'message', label: 'type message' });
                break;
            case 'message':
                setFormInput({ input: 'name', label: 'type name' });
                handleSubmission();
                break;
            default:
                break;
        }
    }
    const handleChange = event => {
        setInputsValue({
            ...inputsValue,
            [event.target.name]: event.target.value
        });
    }
    const handleSubmission = event => {
        console.log('SUBMITTED CONTACT FORM')
    }
  
    return (
        <form>
            <Grid container>
                <Grid item xs={12} sm={10}>
                <BouncyText />
                </Grid>
            </Grid>
            <Grid container spacing={2}>
                <Grid item xs={12} id="contactFomrField">
                    <TextField
                        fullWidth
                        id={formInput.input}
                        label={formInput.label}
                        name={formInput.input}
                        value={inputsValue[formInput.input]}
                        onChange={handleChange}
                    />
                </Grid>
            </Grid>
            <Grid
                container
                justify="center"
                alignItems="center"
            >
                                <Button
                                    onClick={handleClick}
                                    variant="outlined"
                                    color="primary"
                                >
                                    { formInput.input !== 'message' ? 'Next' : 'Send :)'}
                            </Button>
        </form>
    )
}

Answer 1

handleClick()是传递给子组件的回调（在组件中声明），因此应该包装为usecallback()。否则，该回调函数在rerender之后被重新声明，因此它的引用是不同的，使子组件协调。

https://reactjs.org/docs/hooks-reference.html#usecallback