将所有依赖项填充到依赖项数组中可以确保组件在依赖项发生变化时重新渲染,从而避免不必要的错误。下面是一个示例:
import { useState } from 'react'
function Example({ propA, propB }) {
const [stateA, setStateA] = useState('')
// 不良实践:仅将 stateA 作为依赖项
useEffect(() => {
console.log('依赖项发生了变化')
}, [stateA])
// 良好实践:将所有依赖项填充到依赖项数组中
useEffect(() => {
console.log('依赖项发生了变化')
}, [propA, propB, stateA])
return (
...
)
}
在上面的例子中,我们使用了useEffect
钩子,其中我们将所有依赖项填充到依赖项数组中,包括propA
、propB
和stateA
。这确保了当任何一个依赖项发生变化时,组件会重新渲染。这是一种良好的实践方式,可以避免不必要的错误和行为。