替代自定义钩子调用内部使用效果

Question

我有当前的组件：

const Timeline = ({ threshold, throttle }) => {
const [films, setFilms] = useState([])
const [page, setPage] = useState(1)
const [loadMoreLock, setLoadMoreLock] = useState(false)
const [
localStorageFilmsCache,
setLocalStorageFilmsCache
] = useLocalStorage('filmsCache', films);
useEffect(() => {
const fetchFilms = async () => {
try {
const res = await fetch(
`${API_PATH_BASE}/${API_VERSION}/${TRENDING_ENDPOINT}/movie/week?api_key=${THE_MOVIE_DB_API_KEY}&page=${page}`, {
method: 'GET',
}
)
const json = await res.json()
if (page === 1) {
setFilms((films) => json.results)
} else {
setFilms((films) => ([
...films,
...json.results,
]))
}
setLoadMoreLock(() => false)
} catch (e) {
setFilms(() => null)
}
}
if (!loadMoreLock) {
fetchFilms()
}
// Scroll handler fns...
}, [page, loadMoreLock, threshold, throttle])
// Return JSX..

还有一个自定义钩子：

const useLocalStorage = (key, initialValue = '') => {
const [storedValue, setStoredValue] = useState(() => {
try {
const currValue = window.localStorage.getItem(key)
return currValue ? JSON.parse(currValue) : initialValue
} catch (e) {
return initialValue
}
})
const setValue = (value) => {
try {
const valueToStore = value instanceof Function
? value(storedValue)
: value
setStoredValue(() => valueToStore)
window.localStorage.setItem(key, JSON.stringify(valueToStore))
} catch (e) {}
}
return [
storedValue,
setValue,
]
}

我想使用我的本地存储自定义钩子为 API 调用构建客户端缓存。在当前上下文中，我必须在默认的 fn useEffect 作为参数接收中使用我的自定义钩子(状态和 setter fn(，这是不可能的。我对钩子很陌生，我很难考虑替代方案。我可以在没有本地存储钩子的情况下做到这一点，但重用我已经得到的逻辑会很好。 谢谢！

Answer 1

你可以在没有钩子的情况下重用你的函数。如果您希望数据是被动的，钩子很重要。您的样品不需要具有反应性。如果确实希望数据是反应式的，则当前实现无效，因为您需要useContext。

目前，您的useLocalStorage获取或将值设置为localStorage。您的useState无关紧要，因为您可以直接返回值并将其存储在其他useState(电影、页面等(中。如果您尝试减少对localStorage的调用，这仍然无关紧要，因为它会为每个使用useLocalStorage的组件从localStorage中重复加载。您可以通过在storedValue的useStateinit 函数中插入一个 console.log 语句来测试它。Reactcontext会调用它一次，并将其提供给所有组件。