英文:
Should I use useCallback for a function that updates state?
问题
我有一个在React组件中的函数handleFileSelect。它对输入文件进行一些处理，并根据处理结果更新一些状态，这将触发组件重新渲染。
但重新渲染会导致函数被重新创建。那么之前处理的信息会丢失吗？
-
那么，我是否应该使用类似
useCallback的东西来防止函数的重新创建？ -
如果是这样的话，是不是我应该对大多数函数都这样做？
const handleFileSelect = async(event: ChangeEvent<HTMLInputElement>) => {
if (event.target.files && event.target.files.length > 0) {
setFormDisabled(true); // 更新状态
const file = event.target.files[0];
if (!imageWithinSizeLimit(file)) {
sendToast('error', '文件大小超出允许范围！请选择小于0.5MB的文件')
clearImageInput();
setFormDisabled(false); // 更新状态
return;
}
const valid = await validateImageType(file);
if (valid) {
const fileReader = new FileReader();
fileReader.readAsDataURL(file)
fileReader.onload = function(ev) {
// @ts-ignore
imagePreviewRef.current?.setAttribute("src", ev.target.result)
}
setImageValid(true); // 更新状态
setFormDisabled(false) // 更新状态
}
else {
clearImageInput();
sendToast('error', "我们只接受PNG或JPEG格式的头像图片")
setFormDisabled(false) // 更新状态
}
}
}
英文:
I have a function handleFileSelect inside a React Component. It does some processing on the input file, and based on that it updates some states, which would trigger a rerender of the component.
But rerenders cause the function to be re-created. So will all the previous processed info be lost?
-
So should I use something like useCallback to prevent re-creation of my function?
-
And if that is the case, should'nt I do this for most functions?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const handleFileSelect = async(event: ChangeEvent < HTMLInputElement > ) => {
if (event.target.files && event.target.files ? .length > 0) {
setFormDisabled(true); // state-update
const file = event.target.files[0];
if (!imageWithinSizeLimit(file)) {
sendToast('error', 'File size beyond allowed range! Choose a file lesser than 0.5MB')
clearImageInput();
setFormDisabled(false); // state-update
return;
}
const valid = await validateImageType(file);
if (valid) {
const fileReader = new FileReader();
fileReader.readAsDataURL(file)
fileReader.onload = function(ev) {
// @ts-ignore
imagePreviewRef.current ? .setAttribute("src", ev.target.result)
}
setImageValid(true); // state-update
setFormDisabled(false) // state-update
}
else {
clearImageInput();
sendToast('error', "We only accept PNG or JPEG files as Avatar images")
setFormDisabled(false) // state-update
}
}
}
<!-- end snippet -->
答案1
得分: 1
简单回答: 不需要。
如果您不需要将您的函数作为依赖项进行跟踪，或者您不在另一个组件内创建组件，那么您就不需要使用 useCallback。
英文:
Simple answer: No.
If you don't need to track your function as dependency or you don't create component inside another component, then you don't need useCallback
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论