[英]How can I prevent a react component to render every time parent component renders?
I have a single TextField input on one form, the problem is that when I type on it the displayed/render of the value just typed has a kind of delay, and I want to prevent this.我在一个表单上有一个 TextField 输入,问题是当我在上面输入时,刚刚输入的值的显示/呈现有一种延迟,我想防止这种情况发生。
Context: The TextField is label, name and id come from a state object called 'formInput' and they change their value every time a botton is pressed.上下文:TextField 是 label,名称和 ID 来自 state object,称为“formInput”,每次按下按钮时它们都会更改其值。 The value of this single input is stored on a different state object called 'inputsValue' that changes inside a 'handleChange' function called on the onChange prop of the TextField.
这个单一输入的值存储在不同的 state object 上,称为“inputsValue”,该值在“handleChange”内发生变化,function 在 onChange 属性上调用
The problem is that Suspicious: I made a "BouncyLetters" component and used it within a component that also renders a form, I use the BouncyLetters for the title of the form.问题是可疑的:我制作了一个“BouncyLetters”组件并在一个也呈现表单的组件中使用它,我使用 BouncyLetters 作为表单的标题。 When I remove this component from the page the typing display at normal speed.
当我从页面中删除此组件时,打字会以正常速度显示。 So I think disabling this from re-rendering always might solve the problem, idk.
所以我认为从重新渲染中禁用它总是可以解决问题,idk。 Thanks
谢谢
Code:代码:
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> ) }
handleClick()
is a callback(declare in component) pass to child component, so it should be wrapped as useCallback()
. handleClick()
是一个回调(在组件中声明)传递给子组件,因此它应该被包装为useCallback()
。 otherwise, this callback is redeclare after rerender, so it's reference is different, make child component reconcile.否则,此回调在重新渲染后重新声明,因此引用不同,使子组件协调。
https://reactjs.org/docs/hooks-reference.html#usecallback https://reactjs.org/docs/hooks-reference.html#usecallback
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.