如何在 onChange function REACT 中使用 useCallback 挂钩

Question

我有一个简单的 React 组件：如何通过添加 useCallback 钩子来改进这个组件？ 在此组件中添加 useCallback 钩子是个好主意吗？ 如果是，我应该将它添加到哪个function。

 import styled from "styled-components" import React, { useState } from "react" import { useGetFilteredBooks } from "../../hooks/useGetFilteredBooks" import { useRecoilState } from "recoil" import { Books, PageNumber, SearchText } from "../../recoil/globalState" export const SearchBook = () => { const [text, setText] = useRecoilState(SearchText) const [pageNumber, setPageNumber] = useRecoilState(PageNumber) const [setBooks] = useRecoilState(Books); const { refetch } = useGetFilteredBooks(text, setBooks, setPageNumber); const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => { setText(event.target.value) } const handleOnSubmit = (e: any) => { e.preventDefault(); refetch(); } return ( <> <form onSubmit={handleOnSubmit}> <Input value={text} onChange={handleOnChange} placeholder="Enter the name of the book or author" /> <button type="submit">Show</button> </form> </> ) } const Input = styled.input` padding: 10px 10px; width: 300px; `

Answer 1

在 useCallback 中useCallback是个好主意，如果你知道你将使用这些函数作为其他挂钩（如 useEffect 或 useMemo）的依赖项，在你的情况下，你的函数非常微不足道，你没有将它们用作依赖于其他挂钩，在每次重新渲染时重新创建它们的计算成本可以忽略不计，因此useCallback的使用，特别是在这里不需要。 请注意，如果您将其他非记忆函数放在 useCallback 的 deps 数组中，那将一文不值。 如果您仍计划将这些函数包装在useCallback中以在其他组件/挂钩中使用它们：

 import styled from "styled-components" import React, { useState, useCallback } from "react" import { useGetFilteredBooks } from "../../hooks/useGetFilteredBooks" import { useRecoilState } from "recoil" import { Books, PageNumber, SearchText } from "../../recoil/globalState" export const SearchBook = () => { const [text, setText] = useRecoilState(SearchText) const [pageNumber, setPageNumber] = useRecoilState(PageNumber) const [setBooks] = useRecoilState(Books); const { refetch } = useGetFilteredBooks(text, setBooks, setPageNumber); const handleOnChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => { setText(event.target.value) },[]) // No deps needed here according to ESLint, since react setState<s> do not change during re-renders. const handleOnSubmit = useCallback((e: any) => { e.preventDefault(); refetch(); },[refetch]) // refetch is needed here, since it might change during re-renders, you should make sure to memoize that function as well return ( <> <form onSubmit={handleOnSubmit}> <Input value={text} onChange={handleOnChange} placeholder="Enter the name of the book or author" /> <button type="submit">Show</button> </form> </> ) } const Input = styled.input` padding: 10px 10px; width: 300px; `

Answer 2

useCallback有什么作用？

根据文档：

useCallback 将返回一个记忆版本的回调，只有当其中一个依赖项发生变化时才会发生变化。

因此，记忆回调本质上是在重新渲染周期中存活下来的函数。

为什么我们需要记忆回调？

根据文档：

这在将回调传递给依赖于引用相等性的优化子组件以防止不必要的渲染时很有用（例如 shouldComponentUpdate）。

将 memoized 回调与依赖引用相等性的组件相结合， useEffect是功能组件中的一个示例，避免了不必要地重新渲染这些子组件。

您正在使用依赖于引用相等性的组件吗？

不。为了让您的应用程序“正常工作”，目前您不需要useCallback 。

您是否仍应使用useCallback来提高性能？

有人可能会认为， useCallback可能会带来更好的性能，因为不会重新创建函数。 这已在 Kent C.Doods 或此reddit的文章中进行了讨论。 归根结底，过早的、不科学的优化是浪费时间，而且可能有害。 如果您的应用程序可以正常运行并且速度足够快，请不要使用记忆。