1

私が見たほとんどの反応例では、人々はコードを機能コンポーネントの本体に直接配置することを避けているようですが、代わりに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()か?

4

3 に答える 3

-3
useEffect(() => {
    document.title = `You clicked ${count} times`;
  },[count]);

カウント状態が変化したときにのみ useEffect が呼び出されるため、コードはそのようにする必要があります。

于 2020-01-29T10:05:51.613 に答える