javascript - useEffect 异步操作

Question

我对什么时候使用 useEffect() 有点困惑我看到的大多数示例只使用 useEffect() 从 API 和其他示例中提取数据的副作用，但我还没有看到人们在组件挂载时发送 POST 请求时使用 useEffect()。

然后我正在学习 Epic React 的类(class)，这个自定义钩子(Hook)让我很困惑:

const useLocalStorageState = (key, value = "") => {
  const [state, setState] = React.useState(() => window.localStorage.getItem(key) || value)

  React.useEffect(() => {
    window.localStorage.setItem(key, state)
  }, [key, state]);

  return [state, setState]
};

1. 这让我很困惑，因为他们没有使用 useEffect() 从本地存储中读取，这是一个副作用，他们使用的是 useState() ，我会使用 useEffect() 然后使用 useState() 来设置 state 变量的值

2. useEffect() 用于写入 localStorage 的副作用，如果这是对 API 的 POST 请求，useEffect() 仍然会申请？

Answer 1

It confused me because they are not using useEffect() to read from the local storage, which is a side effect, they are using useState(), I would have used useEffect() then useState() to set the value of the state variable

使用 useEffect 的一个很好的理由是它可以防止每次渲染都调用 localStorage.getItem()。

但是，如果您确实为每次渲染调用了 localStorage.getItem()，那么这将是必需的。

const [state, setState] = React.useState(
  () => window.localStorage.getItem(key) || value
)

在这个例子中，getItem 不会为每个渲染调用。它仅在传递给 getState() 的回调中使用。这是初始值，只会在第一次渲染时使用。所以，它解决了同样的问题。

useEffect() is being used for the side effect of writing to localStorage, if this was a POST request to an API, will useEffect() still apply?

它可能在useEffect 中有用，但这要视情况而定。在许多情况下，当用户按下按钮(提交 或点击 事件)时，可能会触发POST 请求。在这些情况下，POST 请求可能是由事件处理程序触发的。

如果您需要始终对特定的 React 生命周期事件(更新、挂载等)执行 POST，则它们需要在 useEffect 中。