如何防止在 React 中使用钩子重新渲染页面?

Question

我试图找到这个特定问题的解决方案，但我可以找到它......在新的中，我有以下代码：

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">&times;</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>
)
}

当我在输入中写一些东西时，我的页面重新呈现...而且我不知道如何阻止这种行为，任何想法?...我尝试使用 useRef，但我不知道我是否正确使用它，所以我没有得到想要的效果

Answer 1

我将您的代码复制到沙箱中并为您修复 https://codesandbox.io/s/agitated-snow-lls4g?fontsize=14

澄清一下，useRef 不会重新渲染，即使您对其进行了更改。仅当其他内容触发重新渲染时，才会显示更新的值。所以使用状态是正确的用法。

虽然我没有为您更改它(为了表明没有它是可能的)，但我强烈建议将电子邮件和名称放在他们自己的 useState 中，以便更改一个不会更改另一个。我也不会从document.getElementById获取值，而是使用从handleChange传入的event.target.value，并为每个元素提供一个handleChange。如果您有多个元素，请使用函数式编程来创建它们的函数。(例如handleEmailChange = handleChange('email')然后 handleChange 是一个返回函数(也称为 currying)的函数。

澄清一下：

• useRef是在渲染之间保留数据(更新不会触发重新渲染)

• useState是在渲染之间保留数据(更新将触发重新渲染)

• 每个输入可能应该使用自己的状态，以避免更改其他组件和效果可能订阅的值。

• 使用currying计算每个输入的句柄更改