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

【问题标题】：Custom React Hooks and what to keep inside useEffect hook自定义 React Hooks 以及在 useEffect 挂钩中保留的内容
【发布时间】：2021-05-31 16:50:48
【问题描述】：

我有以下代码，我想知道如何提高性能，具体来说，我是否应该在 useEffect 中移动 const fuse = new Fuse... 部分和 buildSearchRequest 函数，以便仅在更改搜索查询时调用它？我注意到我的使用自定义钩子的代码多次点击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 }
}```

【问题讨论】：

标签： reactjs typescript react-hooks use-effect

【解决方案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 不会更新变量。如果是这种情况，您的代码将陷入无限循环。

【讨论】：

谢谢。这样好多了。