私の問題を簡単に質問するために、このコードの結果を説明しましょう。
const ForExample = () => {
const [name, setName] = useState('');
const [username, setUsername] = useState('');
useEffect(() => {
console.log('effect');
console.log({
name,
username
});
return () => {
console.log('cleaned up');
console.log({
name,
username
});
};
}, [username]);
const handleName = e => {
const { value } = e.target;
setName(value);
};
const handleUsername = e => {
const { value } = e.target;
setUsername(value);
};
return (
<div>
<div>
<input value={name} onChange={handleName} />
<input value={username} onChange={handleUsername} />
</div>
<div>
<div>
<span>{name}</span>
</div>
<div>
<span>{username}</span>
</div>
</div>
</div>
);
};
がマウントされるとForExample component、「effect」がログに記録されます。これは に関連していますcomponentDidMount()。
そして、名前入力を変更するたびに、「効果」と「クリーンアップ」の両方がログに記録されます。逆に、ユーザー名入力を変更するたびに、[username]の2番目のパラメータを追加して以来、メッセージはログに記録されません。useEffect()これは、componentDidUpdate()
最後に、 がForExample componentアンマウントされると、「クリーンアップされました」がログに記録されます。これは に関連していますcomponentWillUnmount()。
我々はすべてそれを知っている。
つまり、コンポーネントが再レンダリングされるたびに「クリーンアップ」が呼び出されます（アンマウントを含む）。
このコンポーネントがマウント解除された瞬間のみ「クリーンアップ済み」をログに記録するようにしたい場合は、 の 2 番目のパラメータをuseEffect()に変更するだけです[]。
しかし、[username]に変更すると[]、名前入力に対してForExample componentが実装されなくなりますcomponentDidUpdate()。
私がやりたいのは、コンポーネントがcomponentDidUpdate()名前入力のみと の両方をサポートするようにすることですcomponentWillUnmount()。（コンポーネントがアンマウントされている瞬間のみ「クリーンアップ」をログに記録します）
ベストアンサー1
複数の useEffect() を使用できます。
たとえば、変数が の場合data1、コンポーネント内でこれをすべて使用できます。
useEffect( () => console.log("mount"), [] );
useEffect( () => console.log("data1 update"), [ data1 ] );
useEffect( () => console.log("any update") );
useEffect( () => () => console.log("data1 update or unmount"), [ data1 ] );
useEffect( () => () => console.log("unmount"), [] );