如何防止每次父组件渲染时都渲染反应组件？

Question

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

上下文：TextField 是 label，名称和 ID 来自 state object，称为“formInput”，每次按下按钮时它们都会更改其值。 这个单一输入的值存储在不同的 state object 上，称为“inputsValue”，该值在“handleChange”内发生变化，function 在 onChange 属性上调用

问题是可疑的：我制作了一个“BouncyLetters”组件并在一个也呈现表单的组件中使用它，我使用 BouncyLetters 作为表单的标题。 当我从页面中删除此组件时，打字会以正常速度显示。 所以我认为从重新渲染中禁用它总是可以解决问题，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