在哪里可以通过钩子进行API调用？

在哪里可以通过钩子进行API调用？

是的，有一个类似（但不相同！）的

componentDidMount

钩子替代品，它就是

useEffect

钩子。

其他答案并不能真正回答您在哪里可以进行API调用的问题。您可以通过使用

useEffect

并将 空数组或对象作为第二个参数
来代替来进行API调用

componentDidMount()

。这里的关键是第二个参数。如果您不提供空数组或对象作为第二个参数，则将在每个渲染器上调用API调用，并且该调用实际上将变为

componentDidUpdate

。

如文档中所述：

传递一个空的输入数组[]告诉React您的效果不依赖于组件中的任何值，因此该效果仅在安装时运行，而在卸载时清除；它不会在更新上运行。

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

严格在挂载上进行API调用

尝试运行下面的代码，然后查看结果。

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 (    <div>      Name: {!firstName || !lastName ? 'Loading...' : `${firstName} ${lastName}`}    </div>  );}ReactDOM.render(<User />, document.querySelector('#app'));<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script><script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script><div id="app"></div>

某些属性/状态发生更改时的API调用

例如，如果要显示用户的个人资料页面，其中每个页面都有一个userID状态/属性，则应将该ID作为值传递到的第二个参数中，

useEffect

以便为新的用户ID重新获取数据。

componentDidMount

这在这里是不够的，因为如果您直接从用户A转到用户B的配置文件，则可能不需要重新安装组件。

使用传统的类方法，您将执行以下 *** 作：

componentDidMount() {  this.fetchData();}componentDidUpdate(prevProps, prevState) {  if (prevState.id !== this.state.id) {    this.fetchData();  }}

使用钩子，将是：

useEffect(() => {  this.fetchData();}, [id]);

尝试运行下面的代码，然后查看结果。例如，将ID更改为2，以查看

useEffect

再次运行。

function Todo() {  const [todo, setTodo] = React.useState(null);  const [id, setId] = React.useState(1);  React.useEffect(() => {    if (id == null || id === '') {      return;    }    fetch(`https://jsonplaceholder.typipre.com/todos/${id}`)      .then(results => results.json())      .then(data => {        setTodo(data);      });  }, [id]); // useEffect will trigger whenever id is different.  return (    <div>      <input value={id} onChange={e => setId(e.target.value)}/>      <br/>      <pre>{JSON.stringify(todo, null, 2)}</pre>    </div>  );}ReactDOM.render(<Todo />, document.querySelector('#app'));<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script><script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script><div id="app"></div>

您应该继续阅读，以

useEffect

了解您可以/不能使用它。

悬念

正如Dan Abramov在此GitHub
Issue
上所说的那样：

从长远来看，我们将不鼓励这种（useEffect）模式，因为它会鼓励比赛条件。例如-
在通话开始和结束之间可能会发生任何事情，并且您可能会获得新的道具。相反，我们建议使用Suspense进行数据提取

因此，请继续关注悬念！