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,
  ]
}

我想使用我的localStorage自定义钩子为API调用构建客户端缓存。在当前上下文中，我将不得不在默认fn useEffect接收的参数中使用我的自定义钩子（状态和设置器fn），这是不可能的。我对钩子还很陌生，并且很难思考替代方案。我可以在没有我的localStorage钩子的情况下执行此操作，但是重新使用已经存在的逻辑将非常好。谢谢！

Answer 1

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

当前，您的useLocalStorage获取或设置为localStorage的值。您的useState无关紧要，因为您可以直接返回该值并将其存储在其他useState（例如电影，页面等）中。如果您尝试减少对localStorage的调用，那么这仍然无关紧要，因为对于使用localStorage的每个组件，它都会从useLocalStorage反复加载。您可以通过在storedValue的{{1}}初始化函数内插入console.log语句来进行测试。 React useState会调用一次并将其提供给所有组件。

useEffect中自定义挂钩调用的替代方法

1 个答案: