自定义 React Hooks 以及在 useEffect 挂钩中保留的内容

Question

我有以下代码，我想知道如何提高性能，具体来说，我应该移动const fuse = new Fuse...部分和buildSearchRequest中的 buildSearchRequest function 以便仅在更改搜索查询时调用它？ 我注意到我的使用自定义钩子的代码多次点击new Fuse部分。

    const [searchResults, setSearchResults] = React.useState([])
    const fuse = new Fuse(DummySearchResponse.results, {
        keys: ["data.programmeTitle"],
        includeScore: true,
        threshold: 0.2,
    })
    const searchApiUrlStart = "http://mimir.prd.oasvc.itv.com/search?query="
    const searchApiUrlEnd =
        "&entityType=programme&streamingPlatform=itv_hub&checkAvailability=true"

    const buildSearchRequest = (searchString) => {
        return (
            searchApiUrlStart +
            encodeURIComponent(searchString) +
            searchApiUrlEnd
        )
    }

    React.useEffect(() => {
        if (!query) return

        const fetchData = async () => {
            let searchData
            if (useLiveSearchApi) {
                const liveResponse = await fetch(
                    "http://mimir.prd.oasvc.itv.com/search?query=" +
                        buildSearchRequest(query) +
                        "&entityType=programme&streamingPlatform=itv_hub&checkAvailability=true"
                )

                const liveJson = await liveResponse.json()
                const liveResults = await liveJson.results
                searchData = liveResults

            } else {
                const fuseResponse = await fuse.search(query)
                const fuseJson = await fuseResponse.map((result) => {
                    return result.item
                })
                searchData = fuseJson
            }

            const mappedResults = await searchData.map((searchItem) => ({
                title: searchItem.data.programmeTitle,
                contentImageUrl: searchItem.data.imageHref,
                programmeCCId: searchItem.data.programmeCCId,
                episodeId: searchItem.data.episodeId,
            }))

            setSearchResults(mappedResults)
        }

        fetchData()
    }, [query])

    return { searchResults }
}```

Answer 1

首先，避免在 useEffect 中声明回调。 您需要做的是使用 useCallBack 挂钩来声明您的 fetchData callBack

你的代码至少应该看起来像......

const fetchData = useCallBack(() => {
    // Your Fetch Data Code

}, [<dependency array>]) // Here, you want to add all dependencies whose current state you need. Note that if a dependency is not added here, and you use it within the useCallBack, you'll only access a stale state (state during initialization), and never the updated dependency state.

// Here are three ways you can declare your useEffect
useEffect(fetchData, [query]); You probably wanna use this one. Less lines and much cleaner.

useEffect(() => fetchData(), [query]);

useEffect(() => {
    fetchData();
}, [query]);

只有在更新query变量后才会调用您的 useEffect。 因此，为确保不触发 sideEffect，请确保您的 useEffect 或指定为触发器的 useCallBack 不会更新变量。 如果是这种情况，您的代码将陷入无限循环。