基本上，我们在React类组件中使用componentDidMount()生命周期方法进行API调用，就像下面这样
componentDidMount(){
//Here we do API call and do setState accordingly
}
新编写的官方文档提供了一个如何使用useEffect获取数据而不会出现竞争条件问题的示例。
如果您正在使用像Next.js或Remix这样的元框架，它们允许在服务器上获取数据并将数据作为props传递给组件，这可以消除在客户端获取数据的需要。这往往对UX和性能更好，因为它消除了传统的渲染后获取数据模型，或者在转换时预取下一页所需的数据。
如果您想要一个纯客户端解决方案，并且与Suspense配合得很好：
正如 Dan Abramov 在 this GitHub Issue 中所说：
从长远来看，我们将不再鼓励使用 useEffect 模式，因为它会导致竞争条件。例如 - 在您的调用开始和结束之间，任何事情都可能发生，并且您可能已经获得了新的 props。相反，我们将推荐使用 Suspense 进行数据获取。
是的，使用钩子函数有一个类似但不完全相同的替代方法可以替换componentDidMount，那就是useEffect钩子函数。
其他答案并没有真正回答你关于在哪里进行API调用的问题。你可以通过使用useEffect并将空数组或对象作为第二个参数传入来替换componentDidMount()进行API调用。关键在于第二个参数。如果你不提供空数组或对象作为第二个参数，API调用将在每次渲染时被调用，并且它实际上变成了一个componentDidUpdate。
如文档中所述：
传递一个空数组[]作为输入告诉React你的effect不依赖于组件的任何值，因此该effect仅在挂载时运行并在卸载时清除；它不会在更新时运行。
以下是一些需要进行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/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>例如，如果您正在显示一个用户的个人资料页面，其中每个页面都有一个userID状态/prop，您应该将该ID作为值传递到useEffect的第二个参数中，以便为新用户ID重新获取数据。componentDidMount在这里不够用，因为如果您直接从用户A转到用户B的个人资料，则组件可能不需要重新挂载。
在传统的类方式中，您可以执行以下操作:
componentDidMount() {
this.fetchData();
}
componentDidUpdate(prevProps, prevState) {
if (prevState.id !== this.state.id) {
this.fetchData();
}
}
使用钩子，代码如下：
useEffect(() => {
this.fetchData();
}, [id]);
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.typicode.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/react@16.8.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.1/umd/react-dom.development.js"></script>
<div id="app"></div>useEffect的相关内容，以便了解它的使用限制和注意事项。我只是发布这篇文章作为更简单的理解方式，根据我的努力。感谢Yangshun Tay的帖子，它几乎涵盖了所有内容。
代码：
useEffect(() => {
// here is where you make API call(s) or any side effects
fetchData('/data')
}, [] ) /** passing empty brackets is necessary */
因此，使用带有空参数[]的useEffect(fn,[])会使fn()在组件创建（挂载）和销毁（卸载）时触发一次，而不依赖于任何值。
专业提示：
如果在这个fn中有return()，那么它将像类组件的componentWillUnmount()生命周期一样起作用。
useEffect(() => {
fetchData('/data')
return () => {
// this will be performed when component will unmount
resetData()
}
}, [] )
如果你想要在某个值发生变化时调用API，只需将存储该值的变量传递到useEffect()的参数数组中即可。
useEffect(() => {
// perform your API call here
updateDetails();
},[prop.name]) /** --> will be triggered whenever value of prop.name changes */
这将确保每当prop.name的值发生更改时，您的钩子函数将被触发。
还要注意：当组件挂载时，此钩子函数也将被调用。因此，在那时，您的名称值可能处于初始状态，这在您的视图中是不太合意的。因此，您可以在函数中添加自定义条件以避免不必要的API调用。
const todo = useSuspense(TodoResource.get, { id });
function Todo({id}) {
const todo = useSuspense(TodoResource.get, { id });
return <pre>{JSON.stringify(todo, null, 2)}</pre>;
}
const TodoResource = Rest.createResource({
urlPrefix: 'https://jsonplaceholder.typicode.com',
path: '/todos/:id',
schema: Rest.schema.Entity(class Todo {}),
});
var { CacheProvider, AsyncBoundary, useSuspense } = RDC;
function App() {
const [id, setId] = React.useState(1);
return (
<div>
<input value={id} onChange={e => setId(e.target.value)}/>
<br/>
<AsyncBoundary><Todo id={id} /></AsyncBoundary>
</div>
);
}
ReactDOM.createRoot(document.querySelector('#app')).render(<CacheProvider><App/></CacheProvider>);<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@data-client/react@0.9.4/dist/index.umd.min.js"></script>
<script src="https://unpkg.com/@data-client/rest@0.9.4/dist/index.umd.min.js"></script>
<div id="app"></div>当您使用hooks API的功能组件时，可以使用useEffect()方法产生副作用。每当由于这些副作用而更新状态时，组件将重新渲染。
import { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
setCount。当回调执行时，状态将得到更新，React将重新渲染组件。另外从文档中可以看到：
提示
如果您熟悉React类生命周期方法，可以将useEffect Hook视为
componentDidMount、componentDidUpdate和componentWillUnmount的组合。
use-http，例如：import useFetch from 'use-http'
function App() {
// add whatever other options you would add to `fetch` such as headers
const options = {
method: 'POST',
body: {}, // whatever data you want to send
}
var [data, loading, error] = useFetch('https://example.com', options)
// want to use object destructuring? You can do that too
var { data, loading, error } = useFetch('https://example.com', options)
if (error) {
return 'Error!'
}
if (loading) {
return 'Loading!'
}
return (
<code>
<pre>{data}</pre>
</code>
)
}
useEffect()中。 - Aaron Beall