私が見たほとんどの反応例では、人々はコードを機能コンポーネントの本体に直接配置することを避けているようですが、代わりにuseEffect(() => {...})
. 公式ドキュメントの例:
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
これは単に書くよりも優れている理由:
function Example() {
const [count, setCount] = useState(0);
document.title = `You clicked ${count} times`;
return (...);
}
どちらの場合も、ドキュメントのタイトルはレンダリングごとに設定されます。(useEffect()
コードはレンダリング後に実行されると思いますが、この例では関係ないようです)
ifの値を理解していますuseEffect()
:
- 状態は 2 番目のパラメーターとして渡されるため、コードはレンダリングごとに実行されるのではなく、指定された状態の変化に関して実行されます。
- クリーンアップの仕組みを利用しています。
しかし、それがなければ?コードを にラップする理由はまだありますuseEffect()
か?