最初のレンダリング時にのみ関数をトリガーするように useEffect フックを最適化する方法

最適化された useEffect フック: 初期化関数を 1 回だけ呼び出す

React の useEffect フックを使用すると、コンポーネントの props または state の変更に応じてカスタム関数を実行できます。ただし、特定のシナリオでは、初期レンダリング時にのみ関数を呼び出して、レガシーのComponentDidMount ライフサイクル メソッドの動作をシミュレートすることが望まれます。

次のクラスベースのコンポーネントについて考えてみましょう:

<code class="javascript">class MyComponent extends React.PureComponent {
    componentDidMount() {
        loadDataOnlyOnce();
    }
    render() { ... }
}</code>

フックを使用する関数ベースのコンポーネントでは、これは次のように変換できます:

<code class="javascript">function MyComponent() {
    useEffect(() => {
        loadDataOnlyOnce(); // This will fire on every change
    }, [...???]);
    return (...);
}</code>

関数が 1 回だけ呼び出されるようにするには、useEffect:

<code class="javascript">function MyComponent() {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);

  return <div> {/* ... */} </div>;
}</code>

空の配列を指定すると、useEffect は最初のレンダリング フェーズの後にのみ起動され、不必要な再レンダリングを行わずにコンポーネントを効率的に初期化できます。

以上が最初のレンダリング時にのみ関数をトリガーするように useEffect フックを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。