我有同样的问题。不知道为什么他们在文档中没有提到这一点。只想在Tobias Haugen的答案中添加一点内容。
要在每个组件/父组件重新渲染时运行,您需要使用:
useEffect(() => {
})
要在组件挂载(只渲染一次)后仅运行一次任何内容,您需要使用:
useEffect(() => {
// do anything only one time if you pass empty array []
// keep in mind, that component will be rendered one time (with default values) before we get here
}, [] )
为了在组件挂载和数据/data2更改时运行任何内容,请执行以下操作:
const [data, setData] = useState(false)
const [data2, setData2] = useState('default value for first render')
useEffect(() => {
}, [data, data2] )
我通常如何使用它:
export default function Book({id}) {
const [book, bookSet] = useState(false)
const loadBookFromServer = useCallback(async () => {
let response = await fetch('api/book/' + id)
response = await response.json()
bookSet(response)
}, [id])
useEffect(() => {
loadBookFromServer()
}, [loadBookFromServer])
if (!book) return false
return <div>{JSON.stringify(book)}</div>
}
useEffect
钩子中的依赖项。 - emalinga