[英]How can I prevent re-rendering of the page with hooks in React?
i triying to find a solution for this particular problem but i can find it... in new with this, i have this code: 我试图为这个特定的问题找到解决方案,但我可以找到它……与此新的是,我有以下代码:
import React, { Fragment, useState } from 'react'
import '../../media/style/modal.css'
export default function Modal(props) {
const { activateModal } = props
const[values, setValues]= useState({name:'',email:''})
if (activateModal) {
document.getElementById('modals').click()
}
function handleValues(){
setValues({
name:document.getElementById('name').value,
email:document.getElementById('email').value
})
}
return (
<Fragment>
<button type="button" id="modals" style={{ display: 'none' }} data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<div className="modal fade" id="exampleModalCenter" tabIndex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div className="modal-dialog modal-dialog-centered" role="document">
<div className="modal-content">
<form onSubmit={handleSubmit}>
<div className="container">
<div className="row">
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="row justify-content-center">
<h5 className="modal-title" id="modalTitle"><span style={{color:'rgb(197,115,199)'}}>get- </span>started</h5>
</div>
<div className="row justify-content-center">
<input type="text" id="name" name="name" onChange={handleValues} />
<input type="email" id="email" name="email" />
</div>
<div className="row justify-content-center">
<button type="submit" id="btn2">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</Fragment>
)
}
When i write something in the input, my page re renders... and i dont know how to stop this behavior,any idea?... i try to use useRef but i dont know if im using it right so i dont get the desired effect 当我在输入中写一些东西时,我的页面重新呈现...而我不知道如何停止这种行为,有什么想法吗?...我尝试使用useRef,但是我不知道即时消息是否正确使用了,所以我没有得到预期的效果
I copied your code to a sandbox and fixed it up for you https://codesandbox.io/s/agitated-snow-lls4g?fontsize=14 我将您的代码复制到沙箱中,并为您修复了它https://codesandbox.io/s/agitated-snow-lls4g?fontsize=14
Just to clarify, useRef will not re-render, even if you mutate it. 只是为了澄清起见,即使您对其进行了突变,useRef也不会重新呈现。 The updated value will only show when something else triggers a re-render.
仅当其他条件触发重新渲染时,才会显示更新的值。 so useState was the correct usage.
所以useState是正确的用法。
Although I did not change this for you (in order to show that it is possible without it) I would highly recommend putting email and name in their own useState's so that changing the one does not change the other. 尽管我没有为您更改此名称(以表明没有它是可能的),但我还是强烈建议您将电子邮件和姓名放在自己的useState中,以便更改其中一个不会更改另一个。 I would also not get the values from document.getElementById but rather use event.target.value that is passed in from the handleChange, and give a handleChange for each element.
我也不会从document.getElementById获取值,而是使用从handleChange传入的event.target.value,并为每个元素提供一个handleChange。 If you got multiple elements, use functional programming to create their functions.
如果您有多个元素,请使用函数式编程来创建其功能。 (eg
handleEmailChange = handleChange('email')
and then handleChange is a function that returns a function (also known as currying). (例如
handleEmailChange = handleChange('email')
,然后handleChange是一个返回函数的函数(也称为currying)。
To clarify: 澄清:
useRef
is to keep data between renders(updating does not fire re-rendering) useRef
用于在渲染之间保留数据(更新不会触发重新渲染) useState
is to keep data between renders(updating will fire re-rendering) useState
用于保持渲染之间的数据(更新将触发重新渲染)
each input should probably use its own state to avoid changing values that other components and effects might subscribe to. 每个输入可能应使用其自己的状态,以避免更改其他组件和效果可能订阅的值。
currying
to compute a handleChange for each input currying
来计算handleChange为每个输入
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.