在编写useEffect时,应该仔细考虑需要添加到依赖项中的变量,只添加那些真正影响副作用的值。
例如,在以下代码中,我们可以使用数组解构来引用真正需要在useEffect中使用的变量,以避免将整个user对象添加到依赖项。
function UserProfile({ user }) {
const [name, setName] = useState(user.name);
const [email, setEmail] = useState(user.email);
useEffect(() => {
// 仅在name或email更改时更新用户资料
updateUserProfile(user.id, { name, email });
}, [name, email, user.id]);
return (
setName(e.target.value)} />
setEmail(e.target.value)} />
);
}