如何在页面加载时发出请求，反应钩子

Question

我需要在页面加载时发出请求（仅一次）。我试着做类似的事情

if(!array.length){doRequest())

但是使用这种方法，react 会执行 1 个以上的请求，我认为它会降低我的应用程序速度。所以我需要解决这个问题。谢谢

Answer 1

使用类组件时，解决方案是在 componentDidMount 生命周期中发出该请求，该生命周期仅被调用一次。

class Example extends React.Component {
  componentDidMount() {
    doRequest();
  }
  render() {
    return null;
  }
}

如果您尝试在功能组件中使用 Hooks 而不是 Class 组件，那么您应该使用：

function Example() {
  useEffect(() => doRequest(), []);
  return null;
}

当然，希望 doRequest 在上层范围内声明或以某种方式导入。

希望这能解决您的问题，如果您需要对此有更深入的了解，我找到了一篇关于用钩子替换生命周期的精彩文章。

https://dev.to/trentyang/replace-lifecycle-with-hooks-in-react-3d4n

Answer 2

只需使用 useEffect Hook

  import React, {useEffect} from 'react'

     const func = () => {

         useEffect(()=> {
         doRequest()

         },[]) // empty array means it only run once


      }