国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

深入淺出React高階組件

yuanzhanghu / 2473人閱讀

摘要:博客地址背景知識在開始講述高階組件前,我們先來回顧高階函數的定義接收函數作為輸入,或者輸出另一個函數的一類函數,被稱作高階函數。

博客地址:http://www.luckyjing.com/post...

背景知識

在開始講述高階組件前,我們先來回顧高階函數的定義:接收函數作為輸入,或者輸出另一個函數的一類函數,被稱作高階函數。對于高階組件,它描述的便是接受React組件作為輸入,輸出一個新的React組件的組件。

更通俗地描述為,高階組件通過包裹(wrapped)被傳入的React組件,經過一系列處理,最終返回一個相對增強(enhanced)的React組件,供其他組件調用。

實現一個高階組件

下面我們來實現一個最簡單的高階組件(函數),它接受一個React組件,包裹后然后返回。

export default function withHeader(WrappedComponent) {
  return class HOC extends Component {
    render() {
      return 
我是標題
} } }

在其他組件里,我們引用這個高階組件,用來強化它。

@withHeader
export default class Demo extends Component {
  render() {
    return (
      
我是一個普通組件
); } }

在這里使用了ES7里的decorator,來提升寫法上的優雅,但是實際上它只是一個語法糖,下面這種寫法也是可以的。

const EnhanceDemo = withHeader(Demo);

隨后,觀察React組件樹發生了什么變化,如圖所示,可以發現Demo組件被HOC組件包裹起來了,符合了高階組件的預期,即組件是層層包裹起來的,如同洋蔥一樣。

但是隨之帶來的問題是,如果這個高階組件被使用了多次,那么在調試的時候,將會看到一大堆HOC,所以這個時候需要做一點小優化,就是在高階組件包裹后,應當保留其原有名稱。

我們改寫一下上述的高階組件代碼,增加了getDisplayName函數以及靜態屬性displayName,此時再去觀察DOM Tree

function getDisplayName(component) {
  return component.displayName || component.name || "Component";
}
export default function (WrappedComponent) {
  return class HOC extends Component {
    static displayName = `HOC(${getDisplayName(WrappedComponent)})`
    render() {
      return 
我是標題
} } }


此時,原本組件的名稱正確地顯示在了DOM Tree上。

這個簡單的例子里高階組件只做了一件事,那便是為被包裹的組件添加一個標題樣式。這個高階組件可以用到任何一個需要添加此邏輯的組件上,只需要被此高階組件修飾即可。

由此可以看出,高階組件的主要功能是封裝并抽離組件的通用邏輯,讓此部分邏輯在組件間更好地被復用。

高階組件的進階用法 組件參數

還是以上述例子為例,此高階組件僅僅只是展示了我是標題這個名稱,但是為了更好的抽象,此標題應當可以被參數化,如下方式調用。

// 如果傳入參數,則傳入的參數將作為組件的標題呈現
@withHeader("Demo") 
export default class Demo extends Component {
  render() {
    return (
      //...
    );
  }
}

withHeader需要被改寫成如下形式,它接受一個參數,然后返回一個高階組件(函數)。

export default function (title) {
  return function (WrappedComponent) {
    return class HOC extends Component {
      render() {
        return 
{title ? title : "我是標題"}
} } } }

使用ES6寫法可以更加簡潔。

export default(title) => (WrappedComponent) => class HOC extends Component {
  render() {
    return 
{title ? title : "我是標題"}
} }

如圖可以看到,傳入的參數已經反映在DOM Tree里了。

柯里化 Curry

概念:只傳遞函數的一部分參數來調用它,讓它返回一個函數去處理剩下的參數。

函數簽名:fun(params)(otherParams)

應用:在React里,通過柯里化,我們可以通過傳入不同的參數來得到不同的高階組件。

基于屬性代理的方式

屬性代理是最常見的高階組件的使用方式,上述描述的高階組件就是這種方式。它通過做一些操作,將被包裹組件的props和新生成的props一起傳遞給此組件,這稱之為屬性代理。

export default function withHeader(WrappedComponent) {
  return class HOC extends Component {
    render() {
      const newProps = {
        test:"hoc"
      }
      // 透傳props,并且傳遞新的newProps
      return 
} } }
基于反向繼承的方式

這種方式返回的React組件繼承了被傳入的組件,所以它能夠訪問到的區域、權限更多,相比屬性代理方式,它更像打入組織內部,對其進行修改。具體的可以參考附錄里提供的鏈接進行深入學習。

export default function (WrappedComponent) {
  return class Inheritance extends WrappedComponent {
    componentDidMount() {
      // 可以方便地得到state,做一些更深入的修改。
      console.log(this.state);
    }
    render() {
      return super.render();
    }
  }
}
組合多個高階組件

上述高階組件為React組件增強了一個功能,如果需要同時增加多個功能需要怎么做?這種場景非常常見,例如我既需要增加一個組件標題,又需要在此組件未加載完成時顯示Loading。

@withHeader
@withLoading
class Demo extends Component{

}

使用compose可以簡化上述過程,也能體現函數式編程的思想。

const enhance = compose(withHeader,withLoading);
@enhance
class Demo extends Component{

}

組合 Compose

compose可以幫助我們組合任意個(包括0個)高階函數,例如compose(a,b,c)返回一個新的函數d,函數d依然接受一個函數作為入參,只不過在內部會依次調用c,b,a從表現層對使用者保持透明

基于這個特性,我們便可以非常便捷地為某個組件增強或減弱其特征,只需要去變更compose函數里的參數個數便可。

compose函數實現方式有很多種,這里推薦其中一個recompact.compose,詳情見下方參考類庫。

高階組件實戰 實現一個loading組件


實現Loading組件時,發現需要去攔截它的渲染過程,故使用了反向繼承的方式來完成。

在通過裝飾器調用時,需要傳入一個函數作為入參,函數可以獲取到props,隨后返回一個Boolean對象,來決定組件是否需要顯示Loading

import React, {Component} from "react";
import {Spin} from "antd";
export default function (loadingCheck) {
  return function (WrappedComponent) {
    return class extends WrappedComponent {
      componentWillUpdate(nextProps, nextState) {
        console.log("withLoading將會更新");
      }
      render() {
        if (loadingCheck(this.props)) {
          return 
            {super.render()}
          
        } else {
          return super.render();
        }
      }
    }
  }
}

// 使用
@withLoading(props => {
  return props.IndexStore.accountList.length == 0;
})
實現一個copy組件


實現copy組件的時候,我們發現不需要去改變組件內部的展示方式,只是為其在外圍增加一個功能,并不會侵入被傳入的組件,故使用了屬性代理的方式。

import gotem from "gotem";
import React, {Component} from "react";
import ReactDom from "react-dom";
import {message} from "antd";
export default copy = (targetName) => {
  return (WrappedComponent) => {
    return class extends Component {
      componentDidMount() {
        const ctx = this;
        const dom = ReactDom.findDOMNode(ctx);
        const nodes = {
          trigger: dom,
          // targetName為DOM選擇器,復制組件將會復制它的值
          target: dom.querySelector(targetName)
        };
        gotem(nodes.trigger, nodes.target, {
          success: function () {
            message.success("復制成功");
          },
          error: function () {
            message.error("復制失敗,請手動輸入");
          }
        });
      }
      render() {
        return ;
      }
    };
  };
}
// 使用
// 傳入 h3 ,讓復制組件去獲取它的值
@copy("h3")
class Info extends Component {
  render() {
    return (
      

阿里云,點擊復制這段文字

); } }
與父組件區別

高階組件作為一個函數,它可以更加純粹地關注業務邏輯層面的代碼,比如數據處理,數據校驗,發送請求等,可以改善目前代碼里業務邏輯和UI邏輯混雜在一起的現狀。父組件則是UI層的東西,我們先前經常把一些業務邏輯處理放在父組件里,這樣會造成父組件混亂的情況。為了代碼進一步解耦,可以考慮使用高階組件這種模式。

開源的高階組件使用賞析 recompact

recompact提供了一系列使用的高階組件,可以增強組件的行為,可以利用此庫學習高階組件的寫法。

import recompact from "recompact"
import { pure, withProps } from "recompact"

const enhance = recompact.compose(
  withProps({ className: "beautiful" }),
  pure,
)
@enhance
class Demo extends Component{

}
React Sortable

通過使用此庫提供的高階組件,可以方便地讓列表元素可拖動。

總結

高階組件是Decorator模式在React的一種實現,它可以抽離公共邏輯,像洋蔥一樣層層疊加給組件,每一層職能分明,可以方便地抽離與增添。在優化代碼或解耦組件時,可以考慮使用高階組件模式。

參考

recompact:包含了一系列實用的高階組件庫

React Sortable:React拖動庫

深入理解 React 高階組件:其中詳細介紹了屬性代理和反向繼承的區別。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84368.html

相關文章

  • React 深入系列6:高階組件

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

    2shou 評論0 收藏0
  • React高階組件

    摘要:高階組件高階函數接收函數作為輸入,或者輸出另一個函數的一類函數高階組件接收組件作為輸入,輸出一個新的組件的組件。包含了一系列實用的高階組件庫拖動庫深入理解高階組件其中詳細介紹了屬性代理和反向繼承的區別。 React高階組件 高階函數: 接收函數作為輸入,或者輸出另一個函數的一類函數; 高階組件: 接收React組件作為輸入,輸出一個新的React組件的組件。 高階組件通過包裹一個新傳入...

    cncoder 評論0 收藏0
  • React 深入系列7:React 常用模式

    摘要:本篇是深入系列的最后一篇,將介紹開發應用時,經常用到的模式,這些模式并非都有官方名稱,所以有些模式的命名并不一定準確,請讀者主要關注模式的內容。 React 深入系列,深入講解了React中的重點概念、特性和模式等,旨在幫助大家加深對React的理解,以及在項目中更加靈活地使用React。 本篇是React深入系列的最后一篇,將介紹開發React應用時,經常用到的模式,這些模式并非都有...

    Chao 評論0 收藏0
  • React高階組件

    摘要:結語高階函數對于初學者來說可能不太好理解,但當你深入其中,了解其中的原理之后,我們可以使用高階函數來完成很多的工作。 前段時間在工作中寫Hybrid頁面時遇到了這樣的一個場景,公司需要一系列的活動組件,在每個組件注冊的時候都需要調用App端提供的一個接口。一開始也考慮了幾種方式,包括mixin、組件繼承以及react高階組件。但經過了種種衡量,最后選擇使用了高階組件的做法。 1、Mix...

    ThinkSNS 評論0 收藏0
  • React深入】從Mixin到HOC再到Hook

    摘要:與繼承相比,裝飾者是一種更輕便靈活的做法。它只是一種模式,這種模式是由自身的組合性質必然產生的。對比原生組件增強的項可操作所有傳入的可操作組件的生命周期可操作組件的方法獲取反向繼承返回一個組件,繼承原組件,在中調用原組件的。 導讀 前端發展速度非常之快,頁面和組件變得越來越復雜,如何更好的實現狀態邏輯復用一直都是應用程序中重要的一部分,這直接關系著應用程序的質量以及維護的難易程度。 本...

    fox_soyoung 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<