React の高次コンポーネントを理解する: 長所、短所、最新の代替案

最近、高次コンポーネント (HOC) とコンポーネントの機能強化におけるその役割に関するインタビューの質問に遭遇しました。 HOC は強力で高度なテクニックですが、最近の React ではあまり一般的に使用されなくなったことは注目に値します。実際、最新の React ドキュメントでは、HOC の詳細な説明が段階的に廃止されています。

このブログ投稿では、HOC とは何か、その利点、そして現代の React 開発において HOC が推奨されなくなった理由について探っていきます。

高次コンポーネント (HOC)

[A] 高次コンポーネントは、コンポーネントを受け取り、新しいコンポーネントを返す関数です。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

レガシー React ドキュメント

この例は、古い React ドキュメントからのものです。機能コンポーネントを使用するように例を更新し、説明を要約しました。

CommentList コンポーネントは外部データ ソースをサブスクライブして、コメントのリストを表示します。

import React, { useEffect, useState } from "react";

function CommentList() {
    // "DataSource" is some global data source
    const [comments, setComments] = useState(DataSource.getComments());

    useEffect(() => {
        function handleChange() {
            setComments(DataSource.getcomments());
        }

        DataSource.addChangeListener(handleChange);

        return () => {
            DataSource.removeChangeListener(handleChange);
        };
    }, []);

    return (
        <div>
            {comments.map((comment) => (
                <Comment comment={comment} key={comment.id} />
            ))}
        </div>
    );
}

export default CommentList;

BlogPost コンポーネントは単一のブログ投稿を購読します。

import React, { useEffect, useState } from "react";


function BlogPost(props) {
    const [blogPost, setBlogPost] = useState(DataSource.getBlogPost(props.id));

    useEffect(() => {
        function handleChange() {
            setBlogPost(DataSource.getBlogPost(props.id))
        }

        DataSource.addChangeListener(handleChange)

        return () => {
            DataSource.removeChangeListener(handleChange)
        }
    }, [props.id]);

    return <TextBlock text={blogPost} />

}

export default BlogPost;

DataSource は次のようになります:

const DataSource = {
    getComments: () => {
      return [...];
    },
    addChangeListener: (callback) => {},
    removeChangeListener: (callback) => {}
  };

  export default DataSource;

CommentList と BlogPost は同一ではありませんが、実装の多くは同じです。この繰り返しを単純化するために、これらの共有パターンを抽象化する関数を作成できます。

// Custom Hook
export function useSubscription(selectData, props) {
    const [data, setData] = useState(selectData(DataSource, props));

    useEffect(() => {
        function handleChange() {
            setData(selectData(DataSource, props))
        }

        DataSource.addChangeListener(handleChange)

        return () => {
            DataSource.removeChangeListener(handleChange)
        }
    }, [props])

    return data
}


function withSubscription(WrappedComponent, selectData) {
    return function(props) {
        const data = useSubsctiption(selectData, props)
        return <WrappedComponent data={data} {...props} />
    }
}

CommentListWithSubscription と BlogPostWithSubscription がレンダリングされると、DataSource からの最新情報を含むデータ プロパティがそれぞれのコンポーネントに渡されます。

const CommentListWithSubscription = withSubscription(
    CommentList,
    (DataSource) => DataSource.getComments()
)

const BlogPostWithSubscription = withSubscription(
    BlogPost,
    (DataSource, props) => DataSource.getBlogPost(props.id)
)

高次コンポーネント (HOC) は、元のコンポーネントをコンテナ コンポーネントでラップすることで強化する純粋な関数であり、副作用なしに複数のコンポーネント間でロジックを共有できるようになります。

「高次コンポーネントは、最新の React コードでは一般的に使用されていません」とレガシー ドキュメントには記載されています。

その理由を調査した結果、開発者はいくつかの欠点を指摘しました:

複雑さ: HOC は深くネストされたラッパーを作成する可能性があり、コードの読み取りとデバッグが困難になります。

プロップの衝突: HOC はプロップを操作するため、意図しない競合や問題が発生する可能性があります。

代替としてのフック
カスタム フックは、同じロジックを処理するためのより簡潔で簡単な方法を提供し、HOC の必要性を効果的に置き換えます。

一部の開発者は今でも認証やエラー処理などのタスクに HOC を使用しています。メリットとデメリットの両方を理解し、最新のトレンドを常に把握して、チーム メンバーと情報に基づいたディスカッションを行えるようにすることが重要です。

以上がReact の高次コンポーネントを理解する: 長所、短所、最新の代替案の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。