React - API 是否在 useEffect 内调用

Question

我很好奇使用 useEffect 挂钩处理 API 调用与仅处理效果之外的 API 的区别。

例如，对于 useEffect，您可能会执行类似

的操作

const MyComponent = () => {
  const [myState, setMyState] = useState([])
  const [trigger, setTrigger] = useState(false)

  useEffect(() => {
    const getData = async () => {
      const callMyApi = await fetch('http://someApi.com')
      setMyState(await callMyApi.json()
    }

    if(trigger) {
      getData()
    }
  }, [trigger])

  return (
    <button onClick={setTrigger(true)}>Click me</button>
  )
}

Vs，删除 useEffect

const MyComponent = () => {
  const [myState, setMyState] = useState([])

  const getData = async () => {
    const callMyApi = await fetch('http://someApi.com')
    setMyState(await callMyApi.json()
  }

  return (
    <button onClick={getData()}>Click me</button>
  )
}

该代码不准确。但重点是，使用钩子时，是否存在陷阱不使用 useEffect 处理数据获取和更新状态？

Answer 1

理想情况下，

如果您想在单击按钮时进行 API 调用，则无需像 useEffect 和 useState 那样使用任何挂钩，就像您所做的那样。你的第二种方法很完美，没有任何问题。

但是如果有一些特定的用例需要它，那么使用 hooks 也没有错，你也只是做一些额外的重新渲染，但如果这适用于你的用例，那么我想那也很好。

注：

<button onClick={setTrigger(true)}>Click me</button>

这是错误的，这个 setTrigger 函数将在组件挂载时调用，我猜你可能不希望这样。

你可以改为

<button onClick={()=>setTrigger(true)}>Click me</button>

或

const MyComponent = () => {
  const [myState, setMyState] = useState([])

  const getData = async () => {
    const callMyApi = await fetch('http://someApi.com')
    setMyState(await callMyApi.json()
  }

  return (
    <button onClick={getData}>Click me</button>
  )
}

Answer 2

您不能使用按钮来激活事件以响应应用程序状态中任何可检测到的变化。要理解这一点，请考虑聊天应用程序的情况，两个客户端 A 和 B 处于活动状态，并且 A 向 B 发送消息，现在从 A 接收到消息后，B 客户端必须采取一些行动，以及 B 如何知道它已收到消息, 为此 B 可以使用事件侦听器。现在您可以自定义创建事件侦听器，但是您会为每个不同的事件创建自定义事件侦听器吗？

理想情况下，您可以制作一个通用事件监听器，您可以使用它来检测应用程序状态的变化，React 已经为您编写了该事件监听器。

编写自己的侦听器的唯一缺点是浪费时间。

React - API 是否在 useEffect 内调用

React - API call within useEffect or not

fetch

reactjs

react-hooks

use-effect

use-state