如何防止反应组件在每次 parent 组件渲染时渲染？

Question

我在一个表单上有一个 TextField 输入，问题是当我在上面输入时，刚刚输入的值的 displayed/render 有一种延迟，我想防止这种情况发生。

上下文： TextField 是标签、名称和 ID 来自名为 'formInput' 的状态 object，并且每次按下按钮时它们都会更改它们的值。此单个输入的值存储在称为 'inputsValue' 的不同状态 object 中，该状态在 'handleChange' 函数内发生变化，该函数调用 TextField 的 onChange 属性。

问题是可疑的：我制作了一个“BouncyLetters”组件并在一个也呈现表单的组件中使用它，我使用 BouncyLetters 作为表单的标题。当我从页面中删除此组件时，打字显示以正常速度显示。所以我认为从 re-rendering 中禁用它总是可以解决问题，idk。谢谢

代码：

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()。否则，此回调在重新渲染后重新声明，因此它的引用不同，使子组件协调。

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

如何防止反应组件在每次 parent 组件渲染时渲染？

How can I prevent a react component to render every time parent component renders?

javascript

render

reactjs