我在 React Hooks 中编写我的产品，是的，我只是新手。
今天我有关于useCallback性能的数学。这让我考虑了很多使用useCallback或不使用。
一起来看看吧。众所周知，useCallback 用于更好的性能。
function MainScreen() {
const [email, setEmail] = useState("");
const [pwd, setPwd] = useState(""):
const onAuthenticate = useCallback(() => {
MyApi.authenticate(email, pwd);
}, [email, pwd]);
return <div>
<MyCustomButton onPress={onAuthenticate}>LOGIN</MyCustomButton>
</div>;
}
在上面的示例中，假设有两个电子邮件和密码输入，那么MyCustomButton电子邮件或密码更改时将一直呈现。我试图使用useCallback来减少渲染次数，但对我来说，这还不够好。
后来，我想出了一个办法，在依赖项中取出电子邮件和pwd，并使用useRef来保存电子邮件和密码的值。
function MainScreen() {
const [email, setEmail] = useState("");
const [pwd, setPwd] = useState(""):
const emailRef = useRef(email);
const pwdRef = useRef(pwd);
const onAuthenticate = useCallback(() => {
MyApi.authenticate(emailRef.current, pwdRef.current);
}, []);
useEffect(() => {
emailRef.current = email;
pwdRef.current = pwd;
}, [email, pwd]);
return <div>
<MyCustomButton onPress={onAuthenticate}>LOGIN</MyCustomButton>
</div>;
}
使用此方法，每次电子邮件或密码更改时，它都会停止呈现MyCustomButton。
它实际上在性能和成本上更好吗？你们怎么看伙计们？
感谢分享。
我在您的代码中看到的问题不在于useCallback- 与useState有关。
反应中的经验法则(无论你是否使用钩子(是状态对显示的内容有直接影响。如果修改状态，则意味着应重新呈现组件。
这个基本原理是使组件在使用 useState 时重新呈现的原因。React 假设email和password是改变组件外观的东西，因此，每当您更改它们的值之一时，它都会被重新渲染。
如果您实际上没有在MyCustomButton中使用email和pwd，那么使用useRef而不是useState更有意义。
但是，您在第二个代码示例中使用它的方式没有多大意义：您将useState和useRef结合起来，以便在email更改时(使用setEmail时就是这种情况(，然后使用相同的值更新 ref。你从中得到的唯一好处是，onAuthenticate不是每次都重建的。
完全跳过useState会更有益，但从您发布的代码来看，很难实际提出不同的解决方案，因为不清楚如何/何时实际设置email和pwd。
由于您只执行 API 调用，因此我建议不要使用useCallback()。改为使其成为普通函数。
您可能正在进行过早的优化。只有在对应用执行大量计算并且需要记住值的情况下，才应进行性能优化。
从这里可以看到普通函数与使用useCallback()函数的深入比较。
在这种情况下，我想使用React.memo而不是useCallback。 使用 React.memo 来确保此组件不会调用父级的渲染大小写， 一旦组件调用渲染，电子邮件或pwd发生了变化，因此不需要useCallback。
function MainScreen() {
const [email, setEmail] = useState("");
const [pwd, setPwd] = useState(""):
const onAuthenticate = () => {
MyApi.authenticate(email, pwd);
};
return <div>
<MyCustomButton onPress={onAuthenticate}>LOGIN</MyCustomButton>
</div>;
}
export default React.memo(MainScreen)