React - 是不是在 useEffect 中调用 API

Posted 2023-03-17

【中文标题】React - 是不是在 useEffect 中调用 API

【英文标题】：React - API call within useEffect or notReact - 是否在 useEffect 中调用 API

【发布时间】：2021-10-14 07:52:19

【问题描述】：

我很好奇使用 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 处理是否存在陷阱获取数据和更新状态？

【参考方案1】：

理想情况下，

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

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

注意：

<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>
  )

【讨论】：

谢谢！我知道代码肯定有错别字。不太担心那部分，主要是好奇是否使用useEffect。潜在的陷阱等。听起来好像真的没有。

【参考方案2】：

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

理想情况下，您可以创建一个通用事件侦听器，用于检测应用程序状态的变化，React 已经为您编写了该事件侦听器。

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