{"id":24642,"date":"2024-03-16T03:30:55","date_gmt":"2024-03-16T03:30:55","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/"},"modified":"2024-03-22T04:14:11","modified_gmt":"2024-03-22T04:14:11","slug":"what-is-the-method-of-using-reacts-higher-order-components","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/","title":{"rendered":"What is the method of using React’s Higher Order Components?"},"content":{"rendered":"

React HOC (Higher Order Component) is a way of using higher-order components to reuse logic in components. HOC is a function that takes a component as a parameter and returns a new enhanced component.<\/p>\n

Here is how to use:<\/p>\n

    \n
  1. Create a higher order component (HOC) function that takes a component as a parameter.<\/li>\n<\/ol>\n
    const<\/span> hoc<\/span> = (WrappedComponent<\/span>) => {\r\n  \/\/ \u5728\u6b64\u5904\u53ef\u4ee5\u5b9a\u4e49\u4e00\u4e9b\u903b\u8f91\u548c\u72b6\u6001<\/span>\r\n  \/\/ \u8fd4\u56de\u4e00\u4e2a\u65b0\u7684\u589e\u5f3a\u7ec4\u4ef6<\/span>\r\n  return<\/span> class<\/span> EnhancedComponent<\/span> extends<\/span> React.Component<\/span> {\r\n    render<\/span>(<\/span>) {\r\n      \/\/ \u53ef\u4ee5\u5728\u6b64\u5904\u8fdb\u884c\u4e00\u4e9b\u903b\u8f91\u5904\u7406<\/span>\r\n      \/\/ \u901a\u8fc7 props \u5c06\u539f\u59cb\u7ec4\u4ef6\u548c HOC \u7ec4\u4ef6\u8fde\u63a5\u8d77\u6765<\/span>\r\n      return<\/span> <WrappedComponent<\/span> {...this.props<\/span>} \/><\/span><\/span>\r\n    }\r\n  }\r\n};\r\n<\/code><\/pre>\n
      \n
    1. Wrap the component with the HOC function and export the enhanced component.<\/li>\n<\/ol>\n
      const<\/span> EnhancedComponent<\/span> = hoc<\/span>(OriginalComponent<\/span>);\r\n\r\nexport<\/span> default<\/span> EnhancedComponent<\/span>;\r\n<\/code><\/pre>\n
        \n
      1. Use enhanced components in other components.<\/li>\n<\/ol>\n
        import<\/span> EnhancedComponent<\/span> from<\/span> '.\/EnhancedComponent'<\/span>;\r\n\r\nconst<\/span> App<\/span> = (<\/span>) => {\r\n  return<\/span> (\r\n    <div<\/span>><\/span>\r\n      <EnhancedComponent<\/span> \/><\/span>\r\n    <\/div<\/span>><\/span><\/span>\r\n  );\r\n};\r\n<\/code><\/pre>\n
        Using Higher Order Components (HOC), you can apply common logic and state to multiple components, making your code more reusable and maintainable. Additionally, HOC can pass extra functionality to the original component through props, enhancing its capabilities.<\/p>\n","protected":false},"excerpt":{"rendered":"
        React HOC (Higher Order Component) is a way of using higher-order components to reuse logic in components. HOC is a function that takes a component as a parameter and returns a new enhanced component. Here is how to use: Create a higher order component (HOC) function that takes a component as a parameter. const hoc […]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-24642","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nWhat is the method of using React's Higher Order Components? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is the method of using React's Higher Order Components?\" \/>\n<meta property=\"og:description\" content=\"React HOC (Higher Order Component) is a way of using higher-order components to reuse logic in components. HOC is a function that takes a component as a parameter and returns a new enhanced component. Here is how to use: Create a higher order component (HOC) function that takes a component as a parameter. const hoc […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-16T03:30:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T04:14:11+00:00\" \/>\n<meta name=\"author\" content=\"Sophia Anderson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sophia Anderson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/\"},\"author\":{\"name\":\"Sophia Anderson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\"},\"headline\":\"What is the method of using React’s Higher Order Components?\",\"datePublished\":\"2024-03-16T03:30:55+00:00\",\"dateModified\":\"2024-03-22T04:14:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/\"},\"wordCount\":119,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/\",\"name\":\"What is the method of using React's Higher Order Components? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T03:30:55+00:00\",\"dateModified\":\"2024-03-22T04:14:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is the method of using React’s Higher Order Components?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\",\"name\":\"Sophia Anderson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"caption\":\"Sophia Anderson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is the method of using React's Higher Order Components? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/","og_locale":"en_US","og_type":"article","og_title":"What is the method of using React's Higher Order Components?","og_description":"React HOC (Higher Order Component) is a way of using higher-order components to reuse logic in components. HOC is a function that takes a component as a parameter and returns a new enhanced component. Here is how to use: Create a higher order component (HOC) function that takes a component as a parameter. const hoc […]","og_url":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T03:30:55+00:00","article_modified_time":"2024-03-22T04:14:11+00:00","author":"Sophia Anderson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Sophia Anderson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/"},"author":{"name":"Sophia Anderson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30"},"headline":"What is the method of using React’s Higher Order Components?","datePublished":"2024-03-16T03:30:55+00:00","dateModified":"2024-03-22T04:14:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/"},"wordCount":119,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/","url":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/","name":"What is the method of using React's Higher Order Components? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T03:30:55+00:00","dateModified":"2024-03-22T04:14:11+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-of-using-reacts-higher-order-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What is the method of using React’s Higher Order Components?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30","name":"Sophia Anderson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","caption":"Sophia Anderson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=24642"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24642\/revisions"}],"predecessor-version":[{"id":58689,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24642\/revisions\/58689"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=24642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=24642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=24642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}