我在哪里可以使用钩子进行API调用？

基本上我们componentDidMount()在React类组件中的生命周期方法中进行API调用,如下所示

     componentDidMount(){
          //Here we do API call and do setState accordingly
     }

但是在React v16.7.0中引入了钩子之后,就没有更多的类组件了.

我的查询是,我们究竟需要在带有钩子的功能组件中进行API调用？

我们有类似的方法componentDidMount()吗？

是的,有一个类似的(但不一样!)替换为componentDidMount钩子,它是useEffect钩子.

其他答案并没有真正回答您关于API调用位置的问题.您可以通过使用useEffect并传入一个空数组或对象作为第二个参数作为替代来进行API调用componentDidMount().这里的关键是第二个论点.如果不提供空数组或对象作为第二个参数,则将在每个渲染上调用API调用,并且它实际上变为a componentDidUpdate.

如文档中所述:

传入一个空数组[]输入告诉React你的效果不依赖于组件中的任何值,因此该效果只能在mount上运行并在unmount上清理; 它不会在更新时运行.

以下是您需要进行API调用的场景的一些示例:

API调用严格在Mount上

尝试运行下面的代码并查看结果.

function User() {
  const [firstName, setFirstName] = React.useState(null);
  const [lastName, setLastName] = React.useState(null);
  
  React.useEffect(() => {
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        const {name} = data.results[0];
        setFirstName(name.first);
        setLastName(name.last);
      });
  }, []); // <-- Have to pass in [] here!

  return (
    

      Name: {!firstName || !lastName ? 'Loading...' : `${firstName} ${lastName}`}
    
  );
}

ReactDOM.render(, document.querySelector('#app'));