初識(shí)React(7)：高階組件

printempw 發(fā)布于2019-08-23 11:36 / 2236人閱讀

摘要：什么是高階組件高階組件，聽(tīng)著好像很高大尚，但是其實(shí)高階組件就是一個(gè)函數(shù)的參數(shù)是組件，返回的是一個(gè)新的組件。在上面那個(gè)例子中，就是父級(jí)，繼承了父級(jí)中的所有東西。

什么是高階組件

高階組件，聽(tīng)著好像很高大尚，但是其實(shí)高階組件就是一個(gè)函數(shù)的參數(shù)是組件，返回的是一個(gè)新的組件。那么，高階組件有什么好處呢，高階組件可以減少代碼冗余，把共有的代碼提取出來(lái)，下面有個(gè)例子說(shuō)明下：

import React from "react"

function NewHigher(ComponentTest){
  class NewComponent extends React.Component {
    constructor() {
      super();
      this.state = {
          content: "我是內(nèi)容"
      }
   }

    render() {
      return (
        
           高階組件
           
        
      )
    }
  }

  return NewComponent

}

export default NewHigher;

NewHigher返回的就是高階組件

import React from "react";
import NewHigher from "./higherComponent.js"

class Test extends React.Component {
  render() {
    return (
      
        測(cè)試組件
        {this.props.content}
      
    )
  }
}

export default NewHigher(Test);

高階組件可以這么理解吧，就是給現(xiàn)有組件設(shè)置一個(gè)父級(jí)，父級(jí)有的東西，現(xiàn)有組件都繼承了，所以我們可以把所有共有的東西放在這個(gè)高階組件中。在上面那個(gè)例子中，NewHigher就是父級(jí)，Test繼承了父級(jí)中的所有東西。

云服務(wù)器 GPU云服務(wù)器高階組件 docker初識(shí) 初識(shí)關(guān)系數(shù)據(jù)庫(kù) 高階函數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/97195.html

相關(guān)文章

初識(shí)react高階組件

摘要：也明確了大數(shù)據(jù)時(shí)代，前端所應(yīng)該具備的職業(yè)素養(yǎng)高階組件高階組件，高階組件就是一個(gè)組件包裹著另外一個(gè)組件中兩種的實(shí)現(xiàn)方法中兩種的實(shí)現(xiàn)方法返回的類繼承了。之所以被稱為是因?yàn)楸焕^承了，而不是繼承了。在這種方式中，它們的關(guān)系看上去被反轉(zhuǎn)了。前言最近一直再做數(shù)據(jù)可視化，業(yè)務(wù)的理解，數(shù)據(jù)的理解確實(shí)如數(shù)據(jù)可視化要求的一樣，有了更多的理解。但是技術(shù)上還停留在echart，Hchart, 畫圖上。正好...

IamDLY 2019-08-22 16:15 評(píng)論0 收藏0
2017-06-28 前端日?qǐng)?bào)

摘要：前端日?qǐng)?bào)精選我是如何實(shí)現(xiàn)的在線升級(jí)熱更新功能的張?chǎng)涡聆慰臻g鑫生活翻譯表單的運(yùn)用第期晉升評(píng)審的套路異步編程的四種方式黃博客精選組件設(shè)計(jì)和分解思考掘金中文譯使登錄頁(yè)面變得正確掘金前端從強(qiáng)制開(kāi)啟壓縮探究插件運(yùn)行機(jī)制掘金個(gè)常用的簡(jiǎn) 2017-06-28 前端日?qǐng)?bào) 精選我是如何實(shí)現(xiàn)electron的在線升級(jí)熱更新功能的？ ? 張?chǎng)涡?鑫空間-鑫生活【翻譯】React 表單： Refs 的運(yùn)用【...

QLQ 2019-08-20 17:36 評(píng)論0 收藏0
React 深入系列7：React 常用模式

摘要：本篇是深入系列的最后一篇，將介紹開(kāi)發(fā)應(yīng)用時(shí)，經(jīng)常用到的模式，這些模式并非都有官方名稱，所以有些模式的命名并不一定準(zhǔn)確，請(qǐng)讀者主要關(guān)注模式的內(nèi)容。 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對(duì)React的理解，以及在項(xiàng)目中更加靈活地使用React。本篇是React深入系列的最后一篇，將介紹開(kāi)發(fā)React應(yīng)用時(shí)，經(jīng)常用到的模式，這些模式并非都有...

Chao 2019-08-22 17:28 評(píng)論0 收藏0
[源碼閱讀]高性能和可擴(kuò)展的React-Redux

摘要：到主菜了，先看它的一看，我們應(yīng)該有個(gè)猜測(cè)，這貨是個(gè)高階函數(shù)。可能有點(diǎn)繞，但就是這么一個(gè)個(gè)高階函數(shù)組成的，后面會(huì)詳細(xì)說(shuō)。定義了一個(gè)處理函數(shù)和高階函數(shù)執(zhí)行次的方法，這個(gè)方法比上面的復(fù)雜在于它需要檢測(cè)參數(shù)是否訂閱了。注意：文章很長(zhǎng)，只想了解邏輯而不深入的，可以直接跳到總結(jié)部分。初識(shí) 首先，從它暴露對(duì)外的API開(kāi)始 ReactReduxContext /* 提供了 React.creat...

shuibo 2019-08-26 13:22 評(píng)論0 收藏0
React 深入系列6：高階組件

摘要：在項(xiàng)目中用好高階組件，可以顯著提高代碼質(zhì)量。高階組件的定義類比于高階函數(shù)的定義。高階函數(shù)接收函數(shù)作為參數(shù)，并且返回值也是一個(gè)函數(shù)。 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對(duì)React的理解，以及在項(xiàng)目中更加靈活地使用React。 1. 基本概念高階組件是React 中一個(gè)很重要且比較復(fù)雜的概念，高階組件在很多第三方庫(kù)（如Redux）中都...

2shou 2019-08-22 17:28 評(píng)論0 收藏0